3D Transforms: ย้าย/หมุนใน 3 มิติ (X, Y, Z Axis)
3D Transforms เพิ่มแกน Z ใช้ perspective บน parent ให้ความลึก ฟังก์ชัน: rotateX/Y/Z, translateX/Y/Z, translate3d, scale3d, matrix3d
ฟังก์ชัน 3D Transform หลัก
| Function | คำอธิบาย |
|---|---|
| rotateX(angle) | หมุนรอบ X axis (โน้มนอน) |
| rotateY(angle) | หมุนรอบ Y axis (โน้มตั้ง) |
| rotateZ(angle) | หมุนรอบ Z axis (เหมือน 2D rotate) |
| translate3d(x,y,z) | เลื่อน 3 มิติ |
| translateZ(z) | เลื่อนแกน Z (เข้าหา/กลับจากผู้ชม) |
| scale3d(x,y,z) | ขยาย 3 มิติ |
| perspective(n) | กำหนดมุมมอง 3D (บน parent หรือใน transform) |
| matrix3d(...) | Matrix 4x4 (16 ค่า) รวมทุก transform |
โค้ดตัวอย่าง
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
.container { display: inline-block; width: 200px; height: 200px; border: 1px solid #CCC; margin-left: 20px; }
.rotateX { width: 100%; height: 100%; background: rgb(52, 0, 241); transform: perspective(600px) rotateX(85deg); }
.rotateY { width: 100%; height: 100%; background: rgb(55, 0, 255); transform: perspective(600px) rotateY(75deg); }
.translateZ { width: 100%; height: 100%; background: rgb(55, 0, 255); transform: perspective(600px) translateZ(-200px); }
</style>
</head>
<body>
<h1>3D Transform Function Example</h1>
<div class="container"><div class="rotateX"></div></div>
<div class="container"><div class="rotateY"></div></div>
<div class="container"><div class="translateZ"></div></div>
</body>
</html>Perspective: จุดสำคัญของ 3D
perspective: 600pxบน parent – ทุก child ได้ perspective เดียวกันtransform: perspective(600px) rotateY(45deg)– perspective ต่อ element- ค่าเล็ก = มุมมองกว้าง/ดูต้องชัด (fish-eye) ค่ามาก = มุมมองแคบ/flat
Transform-style: preserve-3d
บน parent ของ 3D-transformed children ต้องมี transform-style: preserve-3d ไม่งั้น child จะแบน (flattened) บน plane ของ parent
Backface-visibility
.card { backface-visibility: hidden; } /* ซ่อนด้านหลังเมื่อพลิก */