Thuộc tính kiểu biến đổi CSS
Thí dụ
Hãy để các phần tử con được biến đổi bảo toàn các phép biến đổi 3D:
div
{
transform: rotateY(60deg);
transform-style: preserve-3d;
}
Định nghĩa và Cách sử dụng
Thuộc transform-style
tính chỉ định cách các phần tử lồng nhau được hiển thị trong không gian 3D.
Lưu ý: Thuộc tính này phải được sử dụng cùng với thuộc tính biến đổi .
Để hiểu rõ hơn về transform-style
tài sản, hãy
xem bản trình diễn .
Giá trị mặc định: | phẳng |
---|---|
Thừa hưởng: | không |
Hoạt hình: | không. Đọc về hoạt hình |
Phiên bản: | CSS3 |
Cú pháp JavaScript: | object .style.transformStyle = "secure-3d" |
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.
Các số theo sau -webkit- hoặc -moz- chỉ định phiên bản đầu tiên hoạt động với tiền tố.
Property | |||||
---|---|---|---|---|---|
transform-style | 36.0 12.0 -webkit- |
11.0 | 16.0 10.0 -moz- |
9.0 4.0 -webkit- |
23.0 15.0 -webkit- |
Cú pháp CSS
transform-style: flat|preserve-3d|initial|inherit;
Giá trị tài sản
Property Value | Description |
---|---|
flat | Specifies that child elements will NOT preserve its 3D position. This is default |
preserve-3d | Specifies that child elements will preserve its 3D position |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
Các trang liên quan
Hướng dẫn CSS: CSS 2D Transforms
Hướng dẫn CSS: CSS 3D Transforms
Tham chiếu DOM HTML: thuộc tính Biến đổi