rotate3d()

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

尝试一下

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

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

语法

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))( 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))(y2-1) x ·sin( a) + y z ·(1 -cos( a)) ysin(a) + xz(1-cos(a)) -xsin(a)+yz(1-cos(a)) 1+(1-cos(a))(z2-1) t 0 0 0 1
在ℝℙ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

浏览器兼容性

BCD tables only load in the browser

参见