rotateX()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2022.

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

尝试一下

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

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

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

语法

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

css
rotateX(a)

参数值

a

a 是一个<angle> ，表示旋转的角度。正数角度表示顺时针旋转，负数则表示逆时针旋转。

笛卡儿坐标 ℝ2 齐次坐标 ℝℙ2 笛卡儿坐标 ℝ3 齐次坐标 ℝℙ3
This transformation applies to the 3D space and can't be represented on the plane. 1 0 0 0 cos(a) -sin(a) 0 sin(a) cos(a) 1 0 0 0 0 cos(a) -sin(a) 0 0 sin(a) cos(a) 0 0 0 0 1

示例

HTML

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

CSS

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

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

结果

规范

Specification
CSS Transforms Module Level 2
# funcdef-rotatex

浏览器兼容性

BCD tables only load in the browser

参见