--- title: rotate3d() slug: Web/CSS/transform-function/rotate3d() tags: - 3D - CSS - CSS Transforms translation_of: Web/CSS/transform-function/rotate3d() ---

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

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

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

语法

rotate3d(x, y, z, a)

值

x: {{cssxref("<number>")}} 类型，可以是0到1之间的数值，表示旋转轴X坐标方向的矢量。
y: {{cssxref("<number>")}} 类型，可以是0到1之间的数值，表示旋转轴Y坐标方向的矢量。
z: {{cssxref("<number>")}} 类型，可以是0到1之间的数值，表示旋转轴Z坐标方向的矢量。
a: {{ cssxref("<angle>") }} 类型，表示旋转角度。正的角度值表示顺时针旋转，负值表示逆时针旋转。

在ℝℙ²上的齐次坐标	这种变换应用于3D空间，不可用于平面空间
在ℝ²上的笛卡尔坐标	这种变换应用于3D空间，不可用于平面空间
在ℝ³上的笛卡尔坐标	$(\begin{matrix} 1 + (1 - cos(a))(x^{2} - 1) & z \cdot sin(a)+ x y (1 - cos(a)) & - y \cdot sin(a) + x z \cdot (1 - cos(a)) \\ - z \cdot sin(a) + x y \cdot (1 - cos(a)) & 1+(1-cos(a))(y2-1) & x \cdot sin(a) + y z \cdot (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 \end{matrix})$
在ℝℙ³上的齐次坐标

示例

绕Y轴旋转

HTML

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

CSS

body {
  perspective: 800px;
}

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

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

效果

围绕自定义轴旋转

HTML

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

CSS

body {
  perspective: 800px;
}

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

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

效果

浏览器兼容

有关兼容性信息，请参阅<transform-function> 数据类型。

参见

{{cssxref("transform")}}
{{cssxref("<transform-function>")}}