rotateX()

Baseline 2022

Newly available

Since March 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

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

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

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

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

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

rotateX(a)

笛卡儿坐标 ℝ²	齐次坐标 ℝℙ²	笛卡儿坐标 ℝ³	齐次坐标 ℝℙ³
This transformation applies to the 3D space and can't be represented on the plane.		$(\begin{matrix} 1 & 0 & 0 \\ 0 & cos(a) & -sin(a) \\ 0 & sin(a) & cos(a) \end{matrix})$	$(\begin{matrix} 1 & 0 & 0 & 0 \\ 0 & cos(a) & -sin(a) & 0 \\ 0 & sin(a) & cos(a) & 0 \\ 0 & 0 & 0 & 1 \end{matrix})$

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
CSS Transforms Module Level 2 # funcdef-rotatex

BCD tables only load in the browser