rotateX()

rotateX() 函数定义了一个转换,它可以让一个元素围绕横坐标(水平轴)旋转,而不会对其进行变形。它的结果是一个<transform-function>数据类型。

旋转轴围绕原点旋转,而这个原点通过transform-origin 属性来定义。

注意: rotateX(a) 相当于 rotate3d(1, 0, 0, a).

注意: 与二维平面上的旋转不同,三维旋转的组合通常是不可交换的。换句话说,三维旋转的应用顺序,将会影响最终结果。

语法

rotateX() 引起的旋转量由<angle>指定。如果为正,则顺时针方向移动;如果为负,则逆时针方向移动。

rotateX(a)

参数值

a
a 是一个<angle> ,表示旋转的角度。正数角度表示顺时针旋转,负数则表示逆时针旋转。
笛卡儿坐标 ℝ2 齐次坐标 ℝℙ2 笛卡儿坐标 ℝ3 齐次坐标 ℝℙ3
This transformation applies to the 3D space and can't be represented on the plane. 1000cos(a)-sin(a)0sin(a)cos(a) 10000cos(a)-sin(a)00sin(a)cos(a)00001

示例

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;
}

结果

规范

Specification Status Comment
CSS Transforms Level 2
rotateX()
Editor's Draft Initial definition

浏览器兼容

有关兼容性信息,请参阅 <transform-function> 的数据类型。

另请参阅