rotateX()

该rotateX() CSS功能定义了围绕元素的横坐标旋转元素（水平轴）的变换而不会使该元素变形的变换。其结果是一个<transform-function>数据类型。

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

注： rotateX(a)相当于rotate3d(1, 0, 0, a)。

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

语法

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

rotateX(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.	1000cos(a)-sin(a)0sin(a)cos(a)	10000cos(a)-sin(a)00sin(a)cos(a)00001

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

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

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

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

最后更新于：2017-12-18