Ketika elemen tersebut dihover (`:hover`), kita memberikan transformasi `rotateY(180deg)` untuk memutar elemen sejauh 180 derajat pada sumbu Y. Ini akan memberikan efek membalik elemen secara horizontal.

Langkah 3 Menerapkan Transformasi 3D

Sekarang kita siap untuk menerapkan transformasi 3D yang lebih kompleks. Terdapat beberapa fungsi transformasi 3D yang dapat kita gunakan, seperti `rotateX()`, `rotateY()`, `rotateZ()`, `scaleX()`, `scaleY()`, `scaleZ()`, `translateX()`, `translateY()`, `translateZ()`, `skewX()`, dan `skewY()`. Berikut adalah contoh kode CSS untuk menerapkan beberapa transformasi 3D:

```css

.box {

  /* Kode CSS sebelumnya */

  transform-style: preserve-3d;

}

.box:hover {

  transform: rotateY(180deg) rotateX(180deg) translateZ(100px);

}

```

Dalam contoh ini, kita menambahkan properti `transform-style: preserve-3d` pada elemen dengan kelas "box" untuk mempertahankan tampilan 3D setelah transformasi diterapkan.

Ketika elemen tersebut dihover, kita memberikan transformasi yang lebih kompleks. Dalam contoh ini, kita memutar elemen 180 derajat pada sumbu Y (`rotateY(180deg)`), kemudian memutar 180 derajat pada sumbu X (`rotateX(180deg)`), dan akhirnya menggeser elemen sejauh 100 piksel pada sumbu Z (`translateZ(100px)`). Ini akan memberikan efek memutar, membalik, dan menggeser elemen secara bersamaan.