Thuộc tính transform-style trong CSS

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

Thuộc tính transform-style quy định cách hiển thị các phần tử được nhúng trong không gian 3D.

Ghi chú:Thuộc tính này phải được sử dụng cùng với transform sử dụng cùng thuộc tính.

Xem thêm:

Hướng dẫn CSS3:Chuyển đổi 2D trong CSS3

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

Hướng dẫn HTML DOM:Thuộc tính transformStyle

mẫu

Giữ lại变换后的子元素 3D chuyển đổi:

div {
  transform: rotateY(60deg);
  transform-style: preserve-3d;
}

Thử ngay

Cú pháp CSS

transform-style: phẳng|preserve-3d;

Giá trị thuộc tính

Giá trị Mô tả
phẳng Các phần tử con sẽ không giữ vị trí 3D của mình.
preserve-3d Các phần tử con sẽ giữ vị trí 3D của mình.

Chi tiết kỹ thuật

Giá trị mặc định: phẳng
Kế thừa: không
Phiên bản: CSS3
Cú pháp JavaScript: object.style.transformStyle="preserve-3d"

Hỗ trợ trình duyệt

Số liệu 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.

Số liệu trong bảng biểu thị phiên bản đầu tiên hỗ trợ thuộc tính này với tiền tố.

Chrome IE / Edge Firefox Safari Opera
36.0
12.0 -webkit-		 11.0 16.0
10.0 -moz-		 9.0
4.0 -webkit-		 23.0
15.0 -webkit-