rotate3d()

**`rotate3d()`** CSS 函数 定义了一种变换，该变换围绕 3D 空间中的固定轴旋转元素，而不会使其变形。其结果为 `<transform-function>` 数据类型。

试一试

在 3D 空间中，旋转具有三个自由度，它们共同描述了一个旋转轴。旋转轴由 [x, y, z] 向量定义，并经过原点（由 `transform-origin` 属性定义）。如果按规定，向量未被 *标准化*（即，如果其三个坐标的平方和不为 1），则 用户代理 会在内部对其进行标准化。不可标准化的向量（如零向量 [0, 0, 0]）会导致忽略旋转，但不会使整个 CSS 属性失效。

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

语法

rotate3d() 创建的旋转量由三个 `<number>` 和一个 `<angle>` 指定。`<number>` 表示表示旋转轴的向量的 x、y 和 z 坐标。`<angle>` 表示旋转角度；如果为正，则运动将为顺时针方向；如果为负，则为逆时针方向。

css
rotate3d(x, y, z, a)

值

x

是描述表示旋转轴的向量的 x 坐标的 `<number>`，可以是正数或负数。

y

是描述表示旋转轴的向量的 y 坐标的 `<number>`，可以是正数或负数。

z

是描述表示旋转轴的向量的 z 坐标的 `<number>`，可以是正数或负数。

a

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

笛卡尔坐标 在 ℝ^2 上 此变换应用于 3D 空间，无法在平面上表示。
齐次坐标 在 ℝℙ^2 上
笛卡尔坐标在 ℝ^3 上 ( 1 + ( 1 − cos ( a ) ) ( x 2 − 1 ) z ⋅ sin ( a ) + x y ( 1 − cos ( a ) ) − y ⋅ sin ( a ) + x z ( 1 − cos ( a ) ) − z ⋅ sin ( a ) + x y ( 1 − cos ( a ) ) 1 + ( 1 − cos ( a ) ) ( y 2 − 1 ) x ⋅ sin ( a ) + y z ( 1 − cos ( a ) ) y ⋅ sin ( a ) + x z ( 1 − cos ( a ) ) − x ⋅ sin ( a ) + y z ( 1 − cos ( a ) ) 1 + ( 1 − cos ( a ) ) ( z 2 − 1 ) ) \begin{pmatrix}1 + (1 - \cos(a))(x^2 - 1) & z\cdot \sin(a) + xy(1 - \cos(a)) & -y\cdot \sin(a) + xz(1 - \cos(a))\\-z\cdot \sin(a) + xy(1 - \cos(a)) & 1 + (1 - \cos(a))(y^2 - 1) & x\cdot \sin(a) + yz(1 - \cos(a))\\y\cdot \sin(a) + xz(1 - \cos(a)) & -x\cdot \sin(a) + yz(1 - \cos(a)) & 1 + (1 - \cos(a))(z^2 - 1)\end{pmatrix}
齐次坐标在 ℝℙ^3 上 ( 1 + ( 1 − cos ( a ) ) ( x 2 − 1 ) z ⋅ sin ( a ) + x y ( 1 − cos ( a ) ) − y ⋅ sin ( a ) + x z ( 1 − cos ( a ) ) 0 − z ⋅ sin ( a ) + x y ( 1 − cos ( a ) ) 1 + ( 1 − cos ( a ) ) ( y 2 − 1 ) x ⋅ sin ( a ) + y z ( 1 − cos ( a ) ) 0 y ⋅ sin ( a ) + x z ( 1 − cos ( a ) ) − x ⋅ sin ( a ) + y z ( 1 − cos ( a ) ) 1 + ( 1 − cos ( a ) ) ( z 2 − 1 ) 0 0 0 0 1 ) \begin{pmatrix}1 + (1 - \cos(a))(x^2 - 1) & z\cdot \sin(a) + xy(1 - \cos(a)) & -y\cdot \sin(a) + xz(1 - \cos(a)) & 0\\-z\cdot \sin(a) + xy(1 - \cos(a)) & 1 + (1 - \cos(a))(y^2 - 1) & x\cdot \sin(a) + yz(1 - \cos(a)) & 0\\y\cdot \sin(a) + xz(1 - \cos(a)) & -x\cdot \sin(a) + yz(1 - \cos(a)) & 1 + (1 - \cos(a))(z^2 - 1) & 0\\0 & 0 & 0 & 1\end{pmatrix}

示例

绕 y 轴旋转

HTML

html

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

CSS

css
body {
  perspective: 800px;
}

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

.rotated {
  transform: rotate3d(0, 1, 0, 60deg);
  background-color: pink;
}

结果

绕自定义轴旋转

HTML

html

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

CSS

css
body {
  perspective: 800px;
}

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

.rotated {
  transform: rotate3d(1, 2, -1, 192deg);
  background-color: pink;
}

结果

规范

规范
CSS Transforms 模块级别 2
# funcdef-rotate3d

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅