rotate3d()

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.

rotate3d() CSS 函数定义一个变换,它将元素围绕固定轴移动而不使其变形。运动量由指定的角度定义; 如果为正,运动将为顺时针,如果为负,则为逆时针。

尝试一下

在 3D 空间之中,旋转有 3 个自由维度,描述了旋转轴。旋转轴由一组 [x, y, z] 矢量定义,并且通过变换源点传递(即通过 transform-origin CSS 属性定义)。如果这些矢量被赋予非标准值,即 3 个坐标值的平方和不等于 1 时,它将会被内部隐式标准化。非标准矢量,例如空值和 [0, 0, 0],将会使旋转不起作用,但是不影响整个 CSS 属性的其他效果(译者注:如 transform 中的多项变换)。

备注: 与平面旋转相反的是,3D 旋转的组合通常是不可交换的;这意味着定义旋转规则的值的顺序是严格控制的。

语法

css
rotate3d(x, y, z, a)

x

<number> 类型,可以是 0 到 1 之间的数值,表示旋转轴 X 坐标方向的矢量。

y

<number> 类型,可以是 0 到 1 之间的数值,表示旋转轴 Y 坐标方向的矢量。

z

<number> 类型,可以是 0 到 1 之间的数值,表示旋转轴 Z 坐标方向的矢量。

a

<angle> 类型,表示旋转角度。正的角度值表示顺时针旋转,负值表示逆时针旋转。

在ℝ2上的笛卡尔坐标 这种变换应用于 3D 空间,不可用于平面空间
在ℝℙ2上的齐次坐标
在ℝ3上的笛卡尔坐标 1+(1-cos(a))(x2-1)z·sin(a)+xy(1-cos(a))-y·sin(a)+xz·(1-cos(a))-z·sin(a)+xy·(1-cos(a))1+(1-cos(a))(y2-1)x·sin(a)+yz·(1-cos(a))ysin(a) + xz(1-cos(a))-xsin(a)+yz(1-cos(a))1+(1-cos(a))(z2-1)t0001
在ℝℙ3上的齐次坐标

示例

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

效果

规范

Specification
CSS Transforms Module Level 2
# funcdef-rotate3d

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
rotate3d()

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

参见