rotate()

rotate()

的rotate() CSS函数定义了在2D平面上围绕一个固定点的旋转元素而不使其变形的变换。其结果是一个<transform-function>数据类型。

旋转轴通过由transform-originCSS属性定义的原点。

语法

旋转量rotate()由<angle>指定。如果是正值，运动将是顺时针的; 如果是负值，则会逆时针旋转。180°的旋转称为点反射（point reflection）。

rotate(a)

估计值

a代表旋转的角度<angle>。正角度表示顺针旋转，负角度表示逆时针旋转。

| 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()