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 上檢視此頁面 • 報告此內容的問題