CSS3 3D Transforms

3D Transforms are quite similar to 2D Transforms. Besides rotateX() and rotateY() the 3D Transforms introduces rotateZ() to rotate an element in 3D space around the corresponding axis at a given degree.

#div12 {
    width:250px;
    height:100px;
    color: white;
    background-color: orange;
    margin-bottom: 30px;
}
#div12:hover {
    transform: rotateX(150deg);
}

#div13 {
    width:250px;
    height:100px;
    color: white;
    background-color: orange;
    margin-bottom: 30px;
}
#div13:hover {
    transform: rotateY(150deg);
}

#div14 {
    width:250px;
    height:100px;
    color: white;
    background-color: orange;
    margin-bottom: 30px;
}
#div14:hover {
    transform: rotateZ(150deg);
}

Here is the output:

rotateX(150deg)
rotateY(150deg)
rotateZ(150deg)

Note:
All of the transformations can be switch off by using transform: none;

Leave a Reply