rotateZ()

rotateZ()

该rotateZ() CSS函数定义了绕z轴的旋转元素而不会使该元素变形的变换。其结果是一个<transform-function>数据类型。

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

注：rotateZ(a)等于rotate(a)或rotate3d(0, 0, 1, a)...

注意：与2D平面中的旋转不同，3D旋转的组成通常是不可交换的。换句话说，旋转的顺序影响结果。

语法

rotateZ()创建的旋转量由一个<angle>指定。如果该角度是正的，运动将是顺时针的; 如果是负值，则会逆时针旋转。

rotateZ(a)

可能的值

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

实例

HTML

<div>Normal</div>
<div class="rotated">Rotated</div>

CSS

div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.rotated {
  transform: rotateZ(45deg
  background-color: pink;
}

结果

另见

• transform

• <transform-function>