首页 前端知识 css旋转属性transform

css旋转属性transform

2023-05-14 16:05:36 前端知识 前端哥 99 533 我要收藏

css常见几种元素转换(缩放、位移、旋转、倾斜) 一:缩放 缩放:scale 作用:使元素在形状上发生改变 属性:scale 格式 : transform:scale(X,Y) x:表示水平方向缩放

旋转 div 元素:

div{transform:rotate(7deg);-ms-transform:rotate(7deg); 	/* IE 9 */-moz-transform:rotate(7deg); 	/* Firefox */-webkit-transform:rotate(7deg); /* Safari 和 Chrome */-o-transform:rotate(7deg); 	/* Opera */}


定义和用法

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

为了更好地理解 transform 属性,请查看这个演示

默认值:none
继承性:no
版本:CSS3
JavaScript 语法:object.style.transform="rotate(7deg)"

语法


transform: none|transform-functions;

属性:

描述
none定义不进行转换。
matrix(n,n,n,n,n,n)定义 2D 转换,使用六个值的矩阵。
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)定义 3D 转换,使用 16 个值的 4x4 矩阵。
translate(x,y)定义 2D 转换。
translate3d(x,y,z)定义 3D 转换。
translateX(x)定义转换,只是用 X 轴的值。
translateY(y)定义转换,只是用 Y 轴的值。
translateZ(z)定义 3D 转换,只是用 Z 轴的值。
scale(x,y)定义 2D 缩放转换。
scale3d(x,y,z)定义 3D 缩放转换。
scaleX(x)通过设置 X 轴的值来定义缩放转换。
scaleY(y)通过设置 Y 轴的值来定义缩放转换。
scaleZ(z)通过设置 Z 轴的值来定义 3D 缩放转换。
rotate(angle)定义 2D 旋转,在参数中规定角度。
rotate3d(x,y,z,angle)定义 3D 旋转。
rotateX(angle)定义沿着 X 轴的 3D 旋转。
rotateY(angle)定义沿着 Y 轴的 3D 旋转。
rotateZ(angle)定义沿着 Z 轴的 3D 旋转。
skew(x-angle,y-angle)定义沿着 X 和 Y 轴的 2D 倾斜转换。
skewX(angle)定义沿着 X 轴的 2D 倾斜转换。
skewY(angle)定义沿着 Y 轴的 2D 倾斜转换。
perspective(n)为 3D 转换元素定义透视视图。

完整demo:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>旋转效果</title>    <style>        img {            width: 250px;            transition: all 2s;        }                img:hover {            /* 顺 */            transform: rotateZ(360deg);            /* 逆 */            /* transform: rotate(-360deg); */        }            </style></head><body>    <img src="./images/rotate.png" alt=""></body></html>


转载请注明出处或者链接地址:https://www.qianduange.cn//article/64.html
标签
csscss旋转
评论
发布的文章

jQuery AJAX请求的统一封装

2024-02-01 12:02:53

jQuery知识学习

2024-02-01 12:02:53

JQuery——动画效果

2024-02-01 12:02:52

jQuery复习

2024-02-01 12:02:51

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!