rotate()
的rotate() CSS函数定义了在2D平面上围绕一个固定点的旋转元素而不使其变形的变换。其结果是一个<transform-function>数据类型。
旋转轴通过由transform-originCSS属性定义的原点。
语法
旋转量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()
本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com
