Belajar CSS Transformasi 3D

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