Khóa học đề xuất:

Hàm CSS rotate3d()

Định nghĩa và cách sử dụng rotate3d() CSS

rotate3d() Hàm định nghĩa quay 3D của phần tử. transform sử dụng trong thuộc tính.

Mô hình

Ví dụ 1

Sử dụng rotate3d() Quay nhiều thẻ <div> cùng một lúc:

#myDiv1 {
  transform: rotate3d(1, 2, 1, 45deg);
}
#myDiv2 {
  transform: rotate3d(0, 1, 0, 60deg);
}
#myDiv3 {
  transform: rotate3d(1, 0, 0, 45deg);
}

Thử ngay

Ví dụ 2

Sử dụng rotate3d() Quay ảnh:

#img1 {
  transform: rotate3d(1, 2, 1, 45deg);
}
#img2 {
  transform: rotate3d(0, 1, 0, 60deg);
}
#img3 {
  transform: rotate3d(1, 0, 0, 45deg);
}

Thử ngay

Ngữ pháp CSS

rotate3d(x, y, z, góc)
Giá trị Mô tả
x Số dương hoặc số âm, định nghĩa quay theo trục x.
y Số dương hoặc số âm, định nghĩa quay theo trục y.
z Số dương hoặc số âm, định nghĩa quay theo trục z.
góc

Yêu cầu. Định nghĩa góc quay. Đơn vị có thể:

  • deg（độ)
  • rad（độ弧)
  • turn（vòng）

Chi tiết kỹ thuật

Phiên bản: Mô-đun CSS Transforms Level 2

Hỗ trợ trình duyệt

Số trong bảng biểu thị phiên bản trình duyệt đầu tiên hỗ trợ hàm này hoàn toàn.

Chrome Edge Firefox Safari Opera
12 12 10 4 15

Trang liên quan

Hướng dẫn:Chuyển đổi 3D CSS

Tham khảo:Thuộc tính transform CSS

Tham khảo:Thuộc tính rotate của CSS

Tham khảo:Hàm rotate() CSS

Tham khảo:Hàm rotateX() CSS

Tham khảo:Hàm rotateY() CSS

Tham khảo:Hàm rotateZ() CSS