1. Web
  2. CSS
  3. Reference
  4. Values
  5. <transform-function>
  6. rotate3d()

rotate3d()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Hàm rotate3d() CSS function định nghĩa một phép biến đổi xoay một phần tử quanh một trục cố định trong không gian 3D mà không làm biến dạng nó. Kết quả của nó là kiểu dữ liệu <transform-function>.

Try it

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

Trong không gian 3D, phép quay có ba bậc tự do, cùng nhau mô tả một trục quay duy nhất. Trục quay được xác định bởi một vector [x, y, z] và đi qua gốc tọa độ (như được xác định bởi thuộc tính transform-origin). Nếu, như đã chỉ định, vector không được chuẩn hóa (tức là tổng bình phương ba tọa độ của nó không bằng 1), user agent sẽ chuẩn hóa nó nội bộ. Một vector không thể chuẩn hóa, như vector không [0, 0, 0], sẽ khiến phép quay bị bỏ qua nhưng không làm mất hiệu lực toàn bộ thuộc tính CSS.

Note: Không giống như phép quay trên mặt phẳng 2D, phép hợp thành của các phép quay 3D thường không có tính giao hoán. Nói cách khác, thứ tự áp dụng các phép quay ảnh hưởng đến kết quả.

Cú pháp

css
rotate3d(x, y, z, a)

Giá trị

x

Là một <number> mô tả tọa độ x của vector biểu thị trục quay, có thể là số dương hoặc âm.

y

Là một <number> mô tả tọa độ y của vector biểu thị trục quay, có thể là số dương hoặc âm.

z

Là một <number> mô tả tọa độ z của vector biểu thị trục quay, có thể là số dương hoặc âm.

a

Là một <angle> biểu thị góc quay. Góc dương biểu thị xoay theo chiều kim đồng hồ, góc âm biểu thị xoay ngược chiều kim đồng hồ.

Tọa độ Descartes trên ℝ^2 Phép biến đổi này áp dụng cho không gian 3D và không thể biểu diễn trên mặt phẳng.
Tọa độ thuần nhất trên ℝℙ^2
Tọa độ Descartes trên ℝ^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))y⋅sin(a)+xz(1−cos(a))−x⋅sin(a)+yz(1−cos(a))1+(1−cos(a))(z2−1))\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}
Tọa độ thuần nhất trên ℝℙ^3
(1+(1−cos(a))(x2−1)z⋅sin(a)+xy(1−cos(a))−y⋅sin(a)+xz(1−cos(a))0−z⋅sin(a)+xy(1−cos(a))1+(1−cos(a))(y2−1)x⋅sin(a)+yz(1−cos(a))0y⋅sin(a)+xz(1−cos(a))−x⋅sin(a)+yz(1−cos(a))1+(1−cos(a))(z2−1)00001)\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}

Cú pháp chính thức

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

Ví dụ

Xoay theo trục y

HTML

html
<div>Bình thường</div>
<div class="rotated">Đã xoay</div>

CSS

css
body {
  perspective: 800px;
}

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

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

Kết quả

Xoay theo trục tùy chỉnh

HTML

html
<div>Bình thường</div>
<div class="rotated">Đã xoay</div>

CSS

css
body {
  perspective: 800px;
}

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

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

Kết quả

Thông số kỹ thuật

Specification
CSS Transforms Module Level 2
# funcdef-rotate3d

Khả năng tương thích trình duyệt

Xem thêm

Help improve MDN

Learn how to contribute

This page was last modified on by MDN contributors.

View this page on GitHub • Report a problem with this content