CSS3 - การแปลง 3D
เมื่อใช้กับการแปลง 3 มิติเราสามารถย้ายองค์ประกอบไปยังแกน x แกน y และแกน z ได้ตัวอย่างด้านล่างระบุวิธีการหมุนขององค์ประกอบอย่างชัดเจน
วิธีการแปลง 3D
วิธีการด้านล่างนี้ใช้เพื่อเรียกการแปลง 3D -
| ซีเนียร์ | มูลค่าและรายละเอียด |
|---|---|
| 1 | matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) ใช้เพื่อแปลงองค์ประกอบโดยใช้เมทริกซ์ 16 ค่า |
| 2 | translate3d(x,y,z) ใช้เพื่อเปลี่ยนองค์ประกอบโดยใช้แกน x แกน y และแกน z |
| 3 | translateX(x) ใช้ในการแปลงองค์ประกอบโดยใช้แกน x |
| 4 | translateY(y) ใช้ในการแปลงองค์ประกอบโดยใช้แกน y |
| 5 | translateZ(z) ใช้ในการแปลงองค์ประกอบโดยใช้แกน y |
| 6 | scaleX(x) ใช้เพื่อปรับขนาดการแปลงองค์ประกอบโดยใช้แกน x |
| 7 | scaleY(y) ใช้เพื่อปรับขนาดการแปลงองค์ประกอบโดยใช้แกน y |
| 8 | scaleY(y) ใช้เพื่อแปลงองค์ประกอบโดยใช้แกน z |
| 9 | rotateX(angle) ใช้ในการหมุนเปลี่ยนองค์ประกอบโดยใช้แกน x |
| 10 | rotateY(angle) ใช้ในการหมุนเปลี่ยนองค์ประกอบโดยใช้แกน y |
| 11 | rotateZ(angle) ใช้ในการหมุนเปลี่ยนองค์ประกอบโดยใช้แกน z |
การแปลง 3D แกน X
ตัวอย่างต่อไปนี้แสดงการแปลง 3D ของแกน x
<html>
<head>
<style>
div {
width: 200px;
height: 100px;
background-color: pink;
border: 1px solid black;
}
div#myDiv {
-webkit-transform: rotateX(150deg);
/* Safari */
transform: rotateX(150deg);
/* Standard syntax */
}
</style>
</head>
<body>
<div>
tutorials point.com
</div>
<p>Rotate X-axis</p>
<div id = "myDiv">
tutorials point.com.
</div>
</body>
</html>มันจะให้ผลลัพธ์ดังต่อไปนี้ -
การแปลง 3D แกน Y
ตัวอย่างต่อไปนี้แสดงการแปลง 3D แกน y -
<html>
<head>
<style>
div {
width: 200px;
height: 100px;
background-color: pink;
border: 1px solid black;
}
div#yDiv {
-webkit-transform: rotateY(150deg);
/* Safari */
transform: rotateY(150deg);
/* Standard syntax */
}
</style>
</head>
<body>
<div>
tutorials point.com
</div>
<p>Rotate Y axis</p>
<div id = "yDiv">
tutorials point.com.
</div>
</body>
</html>มันจะให้ผลลัพธ์ดังต่อไปนี้ -
การแปลง 3D แกน Z
ตัวอย่างต่อไปนี้แสดงการแปลง 3D แกน Z -
<html>
<head>
<style>
div {
width: 200px;
height: 100px;
background-color: pink;
border: 1px solid black;
}
div#zDiv {
-webkit-transform: rotateZ(90deg);
/* Safari */
transform: rotateZ(90deg);
/* Standard syntax */
}
</style>
</head>
<body>
<div>
tutorials point.com
</div>
<p>rotate Z axis</p>
<div id = "zDiv">
tutorials point.com.
</div>
</body>
</html>มันจะให้ผลลัพธ์ดังต่อไปนี้ -