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 để thấy sự khác biệt giữa chuyển đổi 2D và 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 transform
CSS, bạn có thể sử dụng các phương thức chuyển đổi 3D sau:
-
rotateX()
-
rotateY()
-
rotateZ()
Phương thức xoayX()
Phương thức rotateX()
xoay một phần tử quanh trục X của nó ở một mức độ nhất định:
Phương thức xoayY()
Phương thức rotateY()
xoay một phần tử quanh trục Y của nó ở một mức độ nhất định:
Phương thức xoayZ()
Phương thức rotateZ()
xoay một phần tử quanh trục Z của nó ở một mức độ nhất định:
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 |