ตัวอย่าง
ให้องค์ประกอบของเด็กเปลี่ยนรักษาแปลง 3D:
div
{
-webkit-transform: rotateY(60deg); /* Chrome, Safari, Opera */
-webkit-transform-style: preserve-3d; /* Chrome, Safari, Opera */
transform: rotateY(60deg);
transform-style: preserve-3d;
}
ลองตัวเอง» ความหมายและการใช้งาน
สถานที่ให้บริการเปลี่ยนสไตล์ระบุว่าองค์ประกอบที่ซ้อนกันจะแสดงในพื้นที่ 3D
Note: คุณสมบัตินี้จะต้องใช้ร่วมกับการ เปลี่ยน สถานที่ให้บริการ
เพื่อทำความเข้าใจคุณสมบัติเปลี่ยนสไตล์ ดูการสาธิต
| ค่าเริ่มต้น: | flat |
|---|---|
| รับการถ่ายทอด: | no |
| Animatable: | no. Read about animatable |
| เวอร์ชัน: | CSS3 |
| ไวยากรณ์ javascript: | object .style.transformStyle="preserve-3d" Try it |
สนับสนุนเบราว์เซอร์
ตัวเลขในตารางระบุราว์เซอร์รุ่นแรกที่สนับสนุนอย่างเต็มที่ทรัพย์สิน
ตามด้วยหมายเลข -webkit- หรือ -moz- ระบุรุ่นแรกที่ทำงานร่วมกับคำนำหน้า
| คุณสมบัติ | |||||
|---|---|---|---|---|---|
| transform-style | 36.0 12.0 -webkit- | 11.0 | 16.0 10.0 -moz- | 9.0 4.0 -webkit- | 23.0 15.0 -webkit- |
CSS ไวยากรณ์
transform-style: flat|preserve-3d|initial|inherit;ค่าทรัพย์สิน
| มูลค่าทรัพย์สิน | ลักษณะ |
|---|---|
| แบน | ระบุว่าองค์ประกอบของเด็กจะไม่รักษาตำแหน่ง 3 มิติ นี้จะเริ่มต้น |
| รักษา-3D | ระบุว่าองค์ประกอบของเด็กจะรักษาตำแหน่ง 3 มิติ |
| แรกเริ่ม | การตั้งค่าคุณสมบัตินี้เป็นค่าเริ่มต้น อ่านเกี่ยวกับการเริ่มต้น |
| สืบทอด | สืบทอดคุณสมบัตินี้จากองค์ประกอบหลักของมัน อ่านเกี่ยวกับการรับมรดก |
หน้าเว็บที่เกี่ยวข้อง
กวดวิชา CSS: CSS 2D แปลง
กวดวิชา CSS: CSS 3D แปลง
อ้างอิง HTML DOM: transformStyle property