Blog

Belajar CSS Transformasi 3D

 

Belajar CSS Transformasi 3D

CSS     10 bulan yang lalu


CSS juga memungkinkan Anda untuk memformat elemen Anda menggunakan transformasi 3D.

Pada artikel ini kita akan membahas 3D transformation method dibawah ini:

  • rotateX()
  • rotateY()
  • rotateZ()

Metode rotateX()

Metode rotateX() memutar elemen di sekitar sumbu X pada tingkat tertentu:

#myDiv {
    -webkit-transform: rotateX(150deg); /* Safari */
    transform: rotateX(150deg);
}

Metode rotateY()

Metode rotateY() memutar elemen di sekitar sumbu Y pada tingkat tertentu:

#myDiv {
    -webkit-transform: rotateX(150deg); /* Safari */
    transform: rotateX(150deg);
}

Metode rotateY()

Metode rotateY() memutar elemen di sekitar sumbu Y pada tingkat tertentu:

#myDiv {
    -webkit-transform: rotateY(130deg); /* Safari */
    transform: rotateY(130deg);
}

Metode rotateZ()

Metode rotateZ() memutar elemen di sekitar sumbu-Z-nya pada tingkat tertentu:

#myDiv {
    -webkit-transform: rotateZ(90deg); /* Safari */
    transform: rotateZ(90deg);
}