Tutorial Belajar CSS Bagian 25 : Cara Membuat 3D Transform di CSS

0
1566

Pada tutorial sebelumnya, kita sudah mempelajari Tutorial Belajar CSS Bagian 24 : Cara Membuat 2D Transform di CSS. Selanjutnya, kita akan mempelajari cara membuat 3d transform di CSS.

No. Nilai & Deskripsi
1matrix3d(n, n, n, n, n, n, n, n, n, n, n, n, n, n, n, n)
Digunakan untuk mengubah elemen dengan menggunakan 16 nilai matriks
2translate3d(x, y, z)
Digunakan untuk mengubah elemen dengan menggunakan sumbu x, sumbu y, dan sumbu z
3translateX(x)
Digunakan untuk mengubah elemen dengan menggunakan sumbu x
4translateY(y)
Digunakan untuk mengubah elemen dengan menggunakan sumbu y
5translateZ(z)
Digunakan untuk mengubah elemen dengan menggunakan sumbu y
6scaleX(x)
Digunakan untuk mengubah skala elemen dengan menggunakan sumbu x
7scaleY(y)
Digunakan untuk mengubah skala elemen dengan menggunakan sumbu y
8scaleZ(z)
Digunakan untuk mengubah elemen dengan menggunakan sumbu z
9rotateX(sudut)
Digunakan untuk memutar mengubah elemen dengan menggunakan sumbu x
10rotateY(sudut)
Digunakan untuk memutar mengubah elemen dengan menggunakan sumbu y
11rotateZ(sudut)
Digunakan untuk memutar mengubah elemen dengan menggunakan sumbu z

Transformasi 3D sumbu X

Contoh berikut menunjukkan transformasi 3D sumbu x.

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

   <body>
   
      <div>
         Tutorial Mbah WP
      </div>
      
      <p>Rotate X-axis</p>
      
      <div id = "myDiv">
         Tutorial Mbah WP
      </div>
      
   </body>
</html>

Browser akan menampilkan hasil sebagai berikut :

Transformasi 3D sumbu Y

Contoh berikut menunjukkan transformasi 3D sumbu y :

<html>
   <head>
      <style>
         div {
            width: 200px;
            height: 100px;
            background-color: pink;
            border: 1px solid black;
         }
         div#yDiv {
            transform: rotateY(150deg);
        }
      </style>
   </head>

   <body>
   
      <div>
         Tutorial Mbah WP
      </div>
      
      <p>Rotate Y axis</p>
      
      <div id = "yDiv">
         Tutorial Mbah WP
      </div>
      
   </body>
</html>

Browser akan menampilkan hasil sebagai berikut :

Transformasi 3D sumbu Z

Contoh berikut menunjukkan transformasi 3D sumbu Z.

<html>
   <head>
      <style>
         div {
            width: 200px;
            height: 100px;
            background-color: pink;
            border: 1px solid black;
         }
         div#zDiv {
            transform: rotateZ(90deg); 
         }
      </style>
   </head>

   <body>
      <div>
         Tutorial Mbah WP
      </div>
      
      <p>rotate Z axis</p>
      
      <div id = "zDiv">
         Tutorial Mbah WP
      </div>
   </body>
</html>

Browser akan menampilkan hasil sebagai berikut :

Semoga tutorial ini membantu Anda untuk mempelajari cara membuat 3D Transform di CSS.

TINGGALKAN KOMENTAR

Silakan masukkan komentar anda!
Silakan masukkan nama Anda di sini

Situs ini menggunakan Akismet untuk mengurangi spam. Pelajari bagaimana data komentar Anda diproses.