rotateX()

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

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

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

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

语法

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

rotateX(a)

可能值

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

实例

HTML

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

CSS

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

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

结果

另见

• transform

• <transform-function>