Chuyển đổi CSS 3D
Chuyển đổi CSS 3D
CSS cũng hỗ trợ chuyển đổi 3D.
Di chuột qua các phần tử bên dưới để xem sự khác biệt giữa chuyển đổi 2D và 3D:
Xoay 2D
Xoay 3D
Trong chương này, bạn sẽ tìm hiểu về thuộc tính CSS sau:
transform
Hỗ trợ trình duyệt
Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính.
| Property | |||||
|---|---|---|---|---|---|
| transform | 36.0 |
10.0 |
16.0 |
9.0 |
23.0 |
Phương pháp chuyển đổi CSS 3D
Với thuộc tính CSS transform, bạn có thể sử dụng các phương pháp chuyển đổi 3D sau:
rotateX()rotateY()rotateZ()
Phương thức xoayX ()
Phương rotateX()pháp quay một phần tử quanh trục X của nó ở một mức độ nhất định:
Thí dụ
#myDiv
{
transform: rotateX(150deg);
}
Phương thức xoayY ()
Phương rotateY()pháp quay một phần tử quanh trục Y của nó ở một mức độ nhất định:
Thí dụ
#myDiv
{
transform: rotateY(150deg);
}
Phương thức xoayZ ()
Phương rotateZ()pháp quay một phần tử quanh trục Z của nó ở một mức độ nhất định:
Thí dụ
#myDiv
{
transform: rotateZ(90deg);
}
Thuộc tính chuyển đổi CSS
Bảng sau liệt kê tất cả các thuộc tính biến đổi 3D:
| Property | Description |
|---|---|
| transform | Applies a 2D or 3D transformation to an element |
| transform-origin | Allows you to change the position on transformed elements |
| transform-style | Specifies how nested elements are rendered in 3D space |
| perspective | Specifies the perspective on how 3D elements are viewed |
| perspective-origin | Specifies the bottom position of 3D elements |
| backface-visibility | Defines whether or not an element should be visible when not facing the screen |
Phương pháp chuyển đổi CSS 3D
| Function | Description |
|---|---|
| matrix3d (n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) |
Defines a 3D transformation, using a 4x4 matrix of 16 values |
| translate3d(x,y,z) | Defines a 3D translation |
| translateX(x) | Defines a 3D translation, using only the value for the X-axis |
| translateY(y) | Defines a 3D translation, using only the value for the Y-axis |
| translateZ(z) | Defines a 3D translation, using only the value for the Z-axis |
| scale3d(x,y,z) | Defines a 3D scale transformation |
| scaleX(x) | Defines a 3D scale transformation by giving a value for the X-axis |
| scaleY(y) | Defines a 3D scale transformation by giving a value for the Y-axis |
| scaleZ(z) | Defines a 3D scale transformation by giving a value for the Z-axis |
| rotate3d(x,y,z,angle) | Defines a 3D rotation |
| rotateX(angle) | Defines a 3D rotation along the X-axis |
| rotateY(angle) | Defines a 3D rotation along the Y-axis |
| rotateZ(angle) | Defines a 3D rotation along the Z-axis |
| perspective(n) | Defines a perspective view for a 3D transformed element |