Rotate Elements in 2D with the transform CSS Property

Share this video with your friends

Social Share Links

Send Tweet
Published 4 years ago
Updated 4 years ago

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.

egghead
egghead
~ 36 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today