CSS3 แปลง 3D
CSS3 ช่วยให้คุณสามารถจัดรูปแบบองค์ประกอบของคุณโดยใช้การแปลง 3D
เลื่อนเมาส์ไปที่องค์ประกอบด้านล่างเพื่อดูความแตกต่างระหว่าง 2 มิติและ 3 มิติการเปลี่ยนแปลง:
2D หมุน
3D หมุน
สนับสนุนเบราว์เซอร์สำหรับ 3D แปลง
ตัวเลขในตารางระบุราว์เซอร์รุ่นแรกที่สนับสนุนอย่างเต็มที่ทรัพย์สิน
ตามด้วยหมายเลข -webkit-, -moz- หรือ -o- ระบุรุ่นแรกที่ทำงานร่วมกับคำนำหน้า
| คุณสมบัติ | |||||
|---|---|---|---|---|---|
| transform | 36.0 12.0 -webkit- |
10.0 | 16.0 10.0 -moz- |
4.0 -webkit- | 23.0 15.0 -webkit- |
| transform-origin (three-value syntax) |
36.0 12.0 -webkit- |
10.0 | 16.0 10.0 -moz- |
4.0 -webkit- | 23.0 15.0 -webkit- |
| transform-style | 36.0 12.0 -webkit- |
11.0 | 16.0 10.0 -moz- |
4.0 -webkit- | 23.0 15.0 -webkit- |
| perspective | 36.0 12.0 -webkit- |
10.0 | 16.0 10.0 -moz- |
4.0 -webkit- | 23.0 15.0 -webkit- |
| perspective-origin | 36.0 12.0 -webkit- |
10.0 | 16.0 10.0 -moz- |
4.0 -webkit- | 23.0 15.0 -webkit- |
| backface-visibility | 36.0 12.0 -webkit- |
10.0 | 16.0 10.0 -moz- |
4.0 -webkit- | 23.0 15.0 -webkit- |
CSS3 แปลง 3D
ในบทนี้คุณจะได้เรียนรู้เกี่ยวกับวิธีการเปลี่ยนแปลง 3 มิติต่อไปนี้:
-
rotateX() -
rotateY() -
rotateZ()
rotateX() วิธี
rotateX() วิธีการหมุนองค์ประกอบรอบแกน X ของมันที่มีระดับได้รับ:
ตัวอย่าง
div
{
-webkit-transform: rotateX(150deg); /* Safari */
transform: rotateX(150deg);
}
ลองตัวเอง» rotateY() วิธี
rotateY() วิธีการหมุนองค์ประกอบรอบแกน Y ของตนที่มีระดับได้รับ:
ตัวอย่าง
div
{
-webkit-transform: rotateY(130deg); /* Safari */
transform: rotateY(130deg);
}
ลองตัวเอง» rotateZ() วิธี
rotateZ() วิธีการหมุนองค์ประกอบรอบแกน Z ของมันที่มีระดับได้รับ:
ตัวอย่าง
div
{
-webkit-transform: rotateZ(90deg); /* Safari */
transform: rotateZ(90deg);
}
ลองตัวเอง» ทดสอบด้วยตัวเองด้วยการออกกำลังกาย!
การใช้สิทธิ 1 » ออกกำลังกาย 2 » ออกกำลังกาย 3 »
CSS3 แปลงคุณสมบัติ
ตารางต่อไปนี้ทุก 3D เปลี่ยนคุณสมบัติ:
| คุณสมบัติ | ลักษณะ |
|---|---|
| transform | การใช้การแปลง 2D หรือ 3D เพื่อองค์ประกอบ |
| transform-origin | ช่วยให้คุณสามารถเปลี่ยนตำแหน่งในองค์ประกอบเปลี่ยน |
| transform-style | ระบุว่าองค์ประกอบที่ซ้อนกันจะแสดงในพื้นที่ 3D |
| perspective | ระบุมุมมองเกี่ยวกับวิธีการที่องค์ประกอบ 3D จะดู |
| perspective-origin | ระบุตำแหน่งด้านล่างขององค์ประกอบ 3D |
| backface-visibility | กำหนดหรือไม่ว่าเป็นองค์ประกอบที่ควรจะมองเห็นเมื่อไม่หันหน้าไปทางหน้าจอ |
3D เปลี่ยนวิธีการ
| ฟังก์ชัน | ลักษณะ |
|---|---|
| matrix3d (n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) | กำหนดเปลี่ยนแปลง 3D โดยใช้เมทริกซ์ 4x4 16 ค่า |
| translate3d(x,y,z) | กำหนดแปล 3D |
| translateX(x) | กำหนดแปล 3D โดยใช้เพียงค่าสำหรับแกน X |
| translateY(y) | กำหนดแปล 3D โดยใช้เพียงค่าสำหรับแกน Y |
| translateZ(z) | กำหนดแปล 3D โดยใช้เพียงค่าสำหรับแกน Z |
| scale3d(x,y,z) | กำหนดขนาดการเปลี่ยนแปลง 3D |
| scaleX(x) | กำหนดขนาดการเปลี่ยนแปลง 3D โดยให้ค่าสำหรับแกน X |
| scaleY(y) | กำหนดขนาดการเปลี่ยนแปลง 3D โดยให้ค่าสำหรับแกน Y |
| scaleZ(z) | กำหนดขนาดการเปลี่ยนแปลง 3D โดยให้ค่าสำหรับแกน Z |
| rotate3d(x,y,z,angle) | กำหนดหมุน 3D |
| rotateX(angle) | กำหนดหมุน 3D พร้อมแกน X |
| rotateY(angle) | กำหนดหมุน 3D พร้อมแกน Y |
| rotateZ(angle) | กำหนดหมุน 3D พร้อมแกน Z |
| perspective(n) | กำหนดมุมมองสำหรับองค์ประกอบ 3D เปลี่ยน |