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>。正角度表示顺时针旋转，负角度表示逆时针旋转。

Cartesian coordinates on ℝ2	Homogeneous coordinates on ℝℙ2	Cartesian coordinates on ℝ3	Homogeneous coordinates on ℝℙ3
This transform applies to the 3D space and cannot be represented on the plane.	cos(a)-sin(a)0sin(a)cos(a)0001	cos(a)-sin(a)00sin(a)cos(a)0000100001

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

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

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

本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com

最后更新于：2017-12-18