CSS chuyển đổi 3D

CSS chuyển đổi 3D

CSS cũng hỗ trợ chuyển đổi 3D.

Hãy di chuột qua các yếu tố dưới đây để xem sự khác biệt giữa việc chuyển đổi 2D và 3D:

2D rotate
3D rotate

Trong chương này, bạn sẽ học các thuộc tính CSS sau:

  • transform

Hỗ trợ trình duyệt

Số trong bảng chỉ ra phiên bản trình duyệt đầu tiên hỗ trợ hoàn toàn thuộc tính này.

Thuộc tính Chrome IE Firefox Safari Opera
transform 36.0 10.0 16.0 9.0 23.0

Phương pháp chuyển đổi 3D CSS

qua CSS transform Thuộc tính, bạn có thể sử dụng các phương pháp chuyển đổi 3D sau:

  • rotateX()
  • rotateY()
  • rotateZ()

Hàm rotateX()

Chuyển đổi X

rotateX() Phương pháp làm cho phần tử quay quanh trục X với góc độ được chỉ định:

Mô hình

#myDiv {
  transform: rotateX(150deg);
}

Thử ngay

Hàm rotateY()

Chuyển đổi Y

rotateY() Phương pháp làm cho phần tử quay quanh trục Y với góc độ được chỉ định:

Mô hình

#myDiv {
  transform: rotateY(130deg);
}

Thử ngay

Hàm rotateZ()

rotateZ() Phương pháp làm cho phần tử quay quanh trục Z với góc độ được chỉ định:

Mô hình

#myDiv {
  transform: rotateZ(90deg);
}

Thử ngay

Thuộc tính chuyển đổi CSS

Bảng dưới đây liệt kê tất cả các thuộc tính chuyển đổi 3D:

Thuộc tính Mô tả
transform Áp dụng chuyển đổi 2D hoặc 3D vào phần tử.
transform-origin Cho phép bạn thay đổi vị trí của phần tử được chuyển đổi.
transform-style Định nghĩa cách phần tử bị nhúng hiển thị trong không gian 3D.
perspective Định nghĩa hiệu ứng nhìn xuyên suốt của phần tử 3D.
perspective-origin Định nghĩa vị trí dưới cùng của phần tử 3D.
backface-visibility Định nghĩa xem phần tử có hiển thị khi không đối diện với màn hình hay không.

Phương pháp chuyển đổi 3D CSS

Hàm Mô tả
matrix3d(n,n,n,n,n,n,
n,n,n,n,n,n,n,n,n,n)		 Định nghĩa chuyển đổi 3D, sử dụng ma trận 4x4 với 16 giá trị.
translate3d(x,y,z) Định nghĩa chuyển đổi 3D.
translateX(x) Định nghĩa chuyển đổi 3D, chỉ sử dụng giá trị cho trục X.
translateY(y) Định nghĩa chuyển đổi 3D, chỉ sử dụng giá trị cho trục Y.
translateZ(z) Định nghĩa chuyển đổi 3D, chỉ sử dụng giá trị cho trục Z.
scale3d(x,y,z) Định nghĩa chuyển đổi thu phóng 3D.
scaleX(x) Định nghĩa chuyển đổi thu phóng 3D, thông qua giá trị trục X.
scaleY(y) Định nghĩa chuyển đổi thu phóng 3D, thông qua giá trị trục Y.
scaleZ(z) Định nghĩa chuyển đổi thu phóng 3D, thông qua giá trị trục Z.
rotate3d(x,y,z,góc) Định nghĩa sự quay 3D.
rotateX(góc) Định nghĩa sự quay 3D theo trục X.
rotateY(góc) Định nghĩa sự quay 3D theo trục Y.
rotateZ(góc) Định nghĩa sự quay 3D theo trục Z.
perspective(n) Định nghĩa góc nhìn viễn cảnh của phần tử chuyển đổi 3D.