CSS transform-style รายการ

การระบุและการใช้งาน

ตัวแปร transform-style กำหนดว่าจะแสดง element ที่ฝังใน 3D อย่างไร

หมายเหตุ:คุณสมบัตินี้ต้องใช้ transform ใช้คุณสมบัติตามรายการ

ดูเพิ่มเติมที่:

ตัวอย่าง CSS3:CSS3 2D การเปลี่ยนแปลง

ตัวอย่าง CSS3:CSS3 3D การเปลี่ยนแปลง

คู่มืออ้างอิง HTML DOM:ตัวแปร transformStyle

ตัวอย่าง

ทำให้ child element ที่ถูก transform รักษาการทบทวน 3D

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

ลองทดลองด้วยตัวเอง

สyntax CSS

transform-style: flat|preserve-3d;

ค่าของอัตราย

ค่า คำอธิบาย
flat เมื่อมี child element จะไม่กลายเป็นตำแหน่ง 3D
preserve-3d เมื่อมี child element จะกลายเป็นตำแหน่ง 3D

รายละเอียดเทคโนโลยี

ค่าเริ่มต้น: flat
นิยาม: no
เวอร์ชัน: CSS3
JavaScript สyntax: object.style.transformStyle="preserve-3d"

การสนับสนุนเบราเซอร์

ตัวเลขในตารางแสดงว่าเวอร์ชันเบราเซอร์แรกที่สนับสนุนคุณสมบัตินี้

ตัวเลขที่มี -webkit- หรือ -moz- แสดงว่าเป็นสัญลักษณ์ของเวอร์ชันแรกที่ใช้

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-