CSS3 - Transformasi 2d

Transformasi 2D digunakan untuk mengubah kembali struktur elemen sebagai terjemahan, rotasi, skala, dan kemiringan.

Tabel berikut berisi nilai-nilai umum yang digunakan dalam transformasi 2D -

Sr.No. Nilai & Deskripsi
1

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

Digunakan untuk mendefinisikan transformasi matriks dengan enam nilai

2

translate(x,y)

Digunakan untuk mengubah elemen bersama dengan sumbu x dan sumbu y

3

translateX(n)

Digunakan untuk mengubah elemen bersama dengan sumbu x

4

translateY(n)

Digunakan untuk mengubah elemen bersama dengan sumbu y

5

scale(x,y)

Digunakan untuk mengubah lebar dan tinggi elemen

6

scaleX(n)

Digunakan untuk mengubah lebar elemen

7

scaleY(n)

Digunakan untuk mengubah ketinggian elemen

8

rotate(angle)

Digunakan untuk memutar elemen berdasarkan suatu sudut

9

skewX(angle)

Digunakan untuk mendefinisikan transformasi kemiringan bersama dengan sumbu x

10

skewY(angle)

Digunakan untuk mendefinisikan transformasi kemiringan bersama dengan sumbu y

Contoh berikut ini menunjukkan contoh semua properti di atas.

Putar 20 derajat

Rotasi kotak dengan sudut 20 derajat seperti yang ditunjukkan di bawah ini -

<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>

Ini akan menghasilkan hasil sebagai berikut -

Putar -20 derajat

Rotasi kotak dengan sudut -20 derajat seperti yang ditunjukkan di bawah ini -

<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>

Ini akan menghasilkan hasil sebagai berikut -

Sumbu X miring

Rotasi kotak dengan sumbu x miring seperti yang ditunjukkan di bawah ini -

<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>

Ini akan menghasilkan hasil sebagai berikut -

Sumbu Y miring

Rotasi kotak dengan sumbu y miring seperti yang ditunjukkan di bawah ini -

<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>

Ini akan menghasilkan hasil sebagai berikut -

Transformasi matriks

Rotasi kotak dengan transformasi Matriks seperti yang ditunjukkan di bawah ini -

<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>

Ini akan menghasilkan hasil sebagai berikut -

Matriks berubah dengan arah lain.

<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>

Ini akan menghasilkan hasil sebagai berikut -