Transform and Scale Elements in 2D Space with the transform CSS Property

Rotate Elements in 2D with the transform CSS Property

Translate Elements in 2D with the transform CSS Property

Skew Elements in 2D with the transform CSS Property

Change Elements Smoothly and Gradually with the CSS Transition Property

Learn CSS Animations for a Better User Experience 

The transform property in CSS gives you the ability to transform elements in 2D or 3D. 
The most common transforms used to change elements are rotate, skew, translate, and scale.

In this video we will look at rotating elements.

When rotating an element you can rotate on both the X and Y axis or only the X or Y axis. 
You can also rotate positive or negative degrees.

Christina Gorton: [0:01] Let's make this egg spin with a transform. This time we are going to do rotate. Rotate, rotate3d, rotateX, rotateY, rotateZ. We're going to focus on rotate X and Y. Rotate, and we'll start there.

[0:18] We're going to do it with degrees. I'm going to do 90 degrees the first time here, and this will go clockwise. We're going to see our little egg rotate clockwise with a positive degrees. If we want it to rotate counterclockwise, we can give it a -90 degrees.

[0:38] You can do full spins. If you do 360, it's going to spin all the way around. Here we go. If you want to rotate on just what's called the X or the Y-axis, the X going horizontal, left to right and the Y-axis going vertically, up and down. You can do that as well. I'm going to hit 180 degrees this time and we're going to see what happens when we rotate this way.

[1:05] You can see the egg flipped upside down. If I do it with the Y, you're going to see the egg flipped as well. This is pretty common with cards on the web where you flip them.

Course

Learn CSS Animations for a Better User Experience

Rotate Elements in 2D with the transform CSS Property

Share this video with your friends