CSS3 - การแปลง 2d

การแปลง 2D ใช้เพื่อเปลี่ยนโครงสร้างองค์ประกอบอีกครั้งเช่นแปลหมุนปรับขนาดและเอียง

ตารางต่อไปนี้มีค่าทั่วไปที่ใช้ในการแปลง 2D -

ซีเนียร์ มูลค่าและรายละเอียด
1

matrix(n,n,n,n,n,n)

ใช้เพื่อกำหนดการแปลงเมทริกซ์ด้วยค่าหกค่า

2

translate(x,y)

ใช้เพื่อแปลงองค์ประกอบพร้อมกับแกน x และแกน y

3

translateX(n)

ใช้ในการแปลงองค์ประกอบพร้อมกับแกน x

4

translateY(n)

ใช้ในการแปลงองค์ประกอบพร้อมกับแกน y

5

scale(x,y)

ใช้เพื่อเปลี่ยนความกว้างและความสูงขององค์ประกอบ

6

scaleX(n)

ใช้เพื่อเปลี่ยนความกว้างขององค์ประกอบ

7

scaleY(n)

ใช้เพื่อเปลี่ยนความสูงขององค์ประกอบ

8

rotate(angle)

ใช้เพื่อหมุนองค์ประกอบตามมุม

9

skewX(angle)

ใช้เพื่อกำหนดการแปลงเอียงพร้อมกับแกน x

10

skewY(angle)

ใช้เพื่อกำหนดการแปลงเอียงพร้อมกับแกน y

ตัวอย่างต่อไปนี้แสดงตัวอย่างคุณสมบัติข้างต้นทั้งหมด

หมุน 20 องศา

การหมุนกล่องด้วยมุม 20 องศาดังแสดงด้านล่าง -

<html>
   <head>
      <style>
         div {
            width: 300px;
            height: 100px;
            background-color: pink;
            border: 1px solid black;
         }
         div#myDiv {
            /* IE 9 */
            -ms-transform: rotate(20deg);
            
            /* Safari */
            -webkit-transform: rotate(20deg);
            
            /* Standard syntax */
            transform: rotate(20deg);
         }
      </style>
   </head>

   <body>
      <div>
         Tutorials point.com.
      </div>
      
      <div id = "myDiv">
         Tutorials point.com
      </div>
   </body>
</html>

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

หมุน -20 องศา

การหมุนกล่องด้วยมุม -20 องศาดังแสดงด้านล่าง -

<html>
   <head>
      <style>
         div {
            width: 300px;
            height: 100px;
            background-color: pink;
            border: 1px solid black;
         }
         div#myDiv {
            /* IE 9 */
            -ms-transform: rotate(-20deg); 
         
            /* Safari */
            -webkit-transform: rotate(-20deg);
         
            /* Standard syntax */	
            transform: rotate(-20deg);
         }
      </style>
   </head>

   <body>
      <div>
         Tutorials point.com.
      </div>
      
      <div id = "myDiv">
         Tutorials point.com
      </div>
   </body>
</html>

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

เอียงแกน X

การหมุนกล่องด้วยแกน x เอียงตามที่แสดงด้านล่าง -

<html>
   <head>
      <style>
         div {
            width: 300px;
            height: 100px;
            background-color: pink;
            border: 1px solid black;
         }
         div#skewDiv {
            /* IE 9 */
            -ms-transform: skewX(20deg); 
            
            /* Safari */
            -webkit-transform: skewX(20deg);
            
            /* Standard syntax */	
            transform: skewX(20deg);
         }
      </style>
   </head>

   <body>
      <div>
         Tutorials point.com.
      </div>
      
      <div id = "skewDiv">
         Tutorials point.com
      </div>
   </body>
</html>

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

เอียงแกน Y

การหมุนกล่องด้วยแกน y เอียงดังแสดงด้านล่าง -

<html>
   <head>
      <style>
         div {
            width: 300px;
            height: 100px;
            background-color: pink;
            border: 1px solid black;
         }
         div#skewDiv {
            /* IE 9 */
            -ms-transform: skewY(20deg); 
            
            /* Safari */
            -webkit-transform: skewY(20deg); 
            
            /* Standard syntax */	
            transform: skewY(20deg);
         }
      </style>
   </head>

   <body>
      <div>
         Tutorials point.com.
      </div>
      
      <div id = "skewDiv">
         Tutorials point.com
      </div>
   </body>
</html>

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

การแปลงเมทริกซ์

การหมุนกล่องด้วยการแปลงเมทริกซ์ดังที่แสดงด้านล่าง -

<html>
   <head>
      <style>
         div {
            width: 300px;
            height: 100px;
            background-color: pink;
            border: 1px solid black;
         }
         div#myDiv1 {
            /* IE 9 */
            -ms-transform: matrix(1, -0.3, 0, 1, 0, 0);
            
            /* Safari */
            -webkit-transform: matrix(1, -0.3, 0, 1, 0, 0); 
            
            /* Standard syntax */
            transform: matrix(1, -0.3, 0, 1, 0, 0); 
         }
      </style>
   </head>

   <body>
      <div>
         Tutorials point.com.
      </div>
      
      <div id = "myDiv1">
         Tutorials point.com
      </div>
   </body>
</html>

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

เมทริกซ์แปลงไปในทิศทางอื่น

<html>
   <head>
      <style>
         div {
            width: 300px;
            height: 100px;
            background-color: pink;
            border: 1px solid black;
         }
         div#myDiv2 {
            /* IE 9 */
            -ms-transform: matrix(1, 0, 0.5, 1, 150, 0);
            
            /* Safari */	
            -webkit-transform: matrix(1, 0, 0.5, 1, 150, 0);
            
            /* Standard syntax */
            transform: matrix(1, 0, 0.5, 1, 150, 0); 
         }
      </style>
   </head>

   <body>
      <div>
         Tutorials point.com.
      </div>
      
      <div id = "myDiv2">
         Tutorials point.com
      </div>
   </body>
</html>

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