WDS80 - Transform Your CSS(Part 3)

In the last two articles, we learned about 2D transforms in CSS which includes skewing, rotating, scaling and translating of elements with just a few lines of code. Now it's time to learn some cool 3D transformations in CSS. Let's begin...

The rotateX() method

The rotateX() method rotates an element about X-axis with given input value of the angle.

 div{
    -webkit-transform: rotateX(30deg); /* Safari */
    transform: rotateX(30deg);
}

The rotateY() method

The rotateY() method rotates an element about Y-axis with given input value of the angle.

 div{
    -webkit-transform: rotateY(30deg); /* Safari */
    transform: rotateY(30deg);
}

The rotateZ() method

The rotateZ() method rotates an element about Z-axis with given input value of the angle.

 div{
    -webkit-transform: rotateZ(30deg); /* Safari */
    transform: rotateZ(30deg);
}

There are some other methods of 3D transformations but they are not so popular or much needed, but you can always look up for them on MDN.

That's all for today. In the next article, we are going to learn about CSS transitions which help to change the property of element smoothly by specifying the time for action.

#keepCoding.