Blog

Belajar CSS Transformasi 3D

 

Belajar CSS Transformasi 3D

CSS     5 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);
}