Tutorial Belajar CSS Bagian 24 : Cara Membuat 2D Transform di CSS

0
20

Pada tutorial sebelumnya, kita sudah mempelajari Tutorial Belajar CSS Bagian 23 : Cara Membuat Bayangan di CSS. Selanjutnya, kita akan mempelajari cara membuat 2D Transform di CSS.

Transformasi 2D digunakan untuk mengubah struktur elemen dalam bentuk translate, putar, skala, dan kemiringan. Tabel berikut berisi nilai-nilai umum yang digunakan dalam transformasi 2D :

No.Nilai & Deskripsi
1matrix(n, n, n, n, n, n)
Digunakan untuk mendefinisikan transformasi matriks dengan enam nilai
2translate(x, y)
Digunakan untuk mengubah elemen terhadapa sumbu x dan sumbu y
3translateX(n)
Digunakan untuk mengubah elemen terhadap sumbu x
4translateY(n)
Digunakan untuk mengubah elemen terhadap sumbu y
5scale(x, y)
Digunakan untuk mengubah lebar dan tinggi elemen
6scaleX(n)
Digunakan untuk mengubah lebar elemen
7scaleY(n)
Digunakan untuk mengubah ketinggian elemen
8rotate(sudut)
Digunakan untuk memutar elemen berdasarkan suatu sudut
9skewX(sudut)
Digunakan untuk mendefinisikan transformasi kemiringan terhadap sumbu x
10skewY(sudut)
Digunakan untuk mendefinisikan transformasi kemiringan terhadap sumbu y

Contoh berikut ini menunjukkan contoh dari semua properti di atas.

Rotate 20 derajat

Rotasi kotak dengan sudut 20 derajat seperti gambar di bawah ini :

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

   <body>
      <div>
         Tutorial Mbah WP
      </div>
      
      <div id = "myDiv">
         Tutorial Mbah WP
      </div>
   </body>
</html>

Browser akan menampilkan hasil sebagai berikut :

Rotate -20 derajat

Rotasi kotak dengan sudut -20 derajat seperti gambar di bawah ini :

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

   <body>
      <div>
         Tutorial Mbah WP
      </div>
      
      <div id = "myDiv">
         Tutorial Mbah WP
      </div>
   </body>
</html>

Browser akan menampilkan hasil sebagai berikut :

Miring Terhadap Sumbu X

Rotasi kotak menjadi miring terhadap sumbu x seperti yang ditunjukkan di bawah ini :

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

   <body>
      <div>
         Tutorial Mbah WP
      </div>
      
      <div id = "skewDiv">
         Tutorial Mbah WP
      </div>
   </body>
</html>

Browser akan menampilkan hasil sebagai berikut :

Miring Terhadap Sumbu Y

Rotasi kotak miring terhadap sumbu y seperti gambar di bawah ini :

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

   <body>
      <div>
         Tutorial Mbah WP
      </div>
      
      <div id = "skewDiv">
         Tutorial Mbah WP
      </div>
   </body>
</html>

Browser akan menampilkan hasil sebagai berikut :

Transformasi Matrix

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 {
            transform: matrix(1, -0.3, 0, 1, 0, 0); 
         }
      </style>
   </head>

   <body>
      <div>
         Tutorial Mbah WP
      </div>
      
      <div id = "myDiv1">
         Tutorial Mbah WP
      </div>
   </body>
</html>

Browser akan menampilkan 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 {
            transform: matrix(1, 0, 0.5, 1, 150, 0); 
         }
      </style>
   </head>

   <body>
      <div>
         Tutorial Mbah WP
      </div>
      
      <div id = "myDiv2">
         Tutorial Mbah WP
      </div>
   </body>
</html>

Browser akan menampilkan hasil sebagai berikut :

Semoga tutorial ini bisa membantu Anda untuk belajar membuat SD Transform di CSS.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.