rotate3d()

Baseline 已广泛支持

此特性已相当成熟，可在许多设备和浏览器版本上使用。自 ⁨2015 年 7 月⁩以来，各浏览器均已提供此特性。

rotate3d() CSS 函数定义了一个变换，用于在 3D 空间中围绕固定轴旋转元素，而不会使其变形。其结果是 <transform-function> 数据类型。

试一试

transform: rotate3d(0, 0, 0, 0);

transform: rotate3d(1, 1, 1, 45deg);

transform: rotate3d(2, -1, -1, -0.2turn);

transform: rotate3d(0, 1, 0.5, 3.142rad);

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    <div class="face front">1</div>
    <div class="face back">2</div>
    <div class="face right">3</div>
    <div class="face left">4</div>
    <div class="face top">5</div>
    <div class="face bottom">6</div>
  </div>
</section>

#default-example {
  background: linear-gradient(skyblue, khaki);
  perspective: 550px;
}

#example-element {
  width: 100px;
  height: 100px;
  transform-style: preserve-3d;
}

.face {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: inherit;
  font-size: 60px;
  color: white;
}

.front {
  background: rgb(90 90 90 / 0.7);
  transform: translateZ(50px);
}

.back {
  background: rgb(0 210 0 / 0.7);
  transform: rotateY(180deg) translateZ(50px);
}

.right {
  background: rgb(210 0 0 / 0.7);
  transform: rotateY(90deg) translateZ(50px);
}

.left {
  background: rgb(0 0 210 / 0.7);
  transform: rotateY(-90deg) translateZ(50px);
}

.top {
  background: rgb(210 210 0 / 0.7);
  transform: rotateX(90deg) translateZ(50px);
}

.bottom {
  background: rgb(210 0 210 / 0.7);
  transform: rotateX(-90deg) translateZ(50px);
}

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

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

语法

css

rotate3d(x, y, z, a)

值

x: 表示旋转轴向量的 x 坐标的<number>，可以是正数或负数。
y: 表示旋转轴向量的 y 坐标的<number>，可以是正数或负数。
z: 表示旋转轴向量的 z 坐标的<number>，可以是正数或负数。
a: 表示旋转角度的<angle>。正角度表示顺时针旋转，负角度表示逆时针旋转。

齐次坐标，在 ℝℙ^2 上	此变换适用于 3D 空间，无法在平面上表示。
笛卡尔坐标，在 ℝ^2 上	此变换适用于 3D 空间，无法在平面上表示。
笛卡尔坐标，在 ℝ^3 上	$\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 上	$\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}$

正式语法

<rotate3d()> = 
  rotate3d( <number> , <number> , <number> , [ <angle> | <zero> ] )

示例

绕 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 变换模块级别 2 # funcdef-rotate3d

浏览器兼容性

另见

帮助改进 MDN

了解如何贡献

此页面最后由 MDN 贡献者于 2025 年 10 月 10 日修改。

在 GitHub 上查看此页面 • 报告此内容的问题