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>

มันจะให้ผลลัพธ์ดังต่อไปนี้ -