CSS参考手册
变换 | Transforms
rotate()
的rotate()
CSS函数定义了在2D平面上围绕一个固定点的旋转元素而不使其变形的变换。其结果是一个<transform-function>
数据类型。
旋转轴通过由transform-origin
CSS属性定义的原点。
语法
旋转量rotate()
由<angle>
指定。如果是正值,运动将是顺时针的; 如果是负值,则会逆时针旋转。180°的旋转称为点反射(point reflection)。
rotate(a)
估计值
a
代表旋转的角度<angle>
。正角度表示顺针旋转,负角度表示逆时针旋转。
Cartesian coordinates on ℝ2 |
Homogeneous coordinates on ℝℙ2 |
Cartesian coordinates on ℝ3 |
Homogeneous coordinates on ℝℙ3 |
---|---|---|---|
cos(a)-sin(a) sin(a)cos(a) |
cos(a)-sin(a)0sin(a)cos(a)0001 |
cos(a)-sin(a)0sin(a)cos(a)0001 |
cos(a)-sin(a)00sin(a)cos(a)0000100001 |
| cos(a) sin(a) -sin(a) cos(a) 0 0 |
实例
HTML
<div>Normal</div>
<div class="rotated">Rotated</div>
CSS
div {
width: 80px;
height: 80px;
background-color: skyblue;
}
.rotated {
transform: rotate(45deg); /* Equal to rotateZ(45deg) */
background-color: pink;
}
结果
另见
transform
<transform-function>
rotate3d()
变换 | Transforms相关
层叠样式表( Cascading Style Sheets )是一种用来表现 HTML 或 XML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。