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

0
19

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.

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.