CSS rotate animation examples

CSS rotate animation examples. Use the rotate() CSS function to create rotation animations with CSS. This ranges from loading icons to hamburger menus.

Dec 18, 2021 | Read time 6 minutes

🔔 Table of contents

In this guide, I will go through a few examples to create CSS rotate animations using the rotate() function.

To rotate a HTML element with CSS animations, we use the rotate() CSS function.

For example, in the codepen below - we are rotating the DIV box 45 degrees infinitely

Explanation of the above code

For the HTML, we have the following basic structure:

<div class="element">
</div>

The main part is in the CSS. We first define the @keyframes of the animation.

In this case we want the initial position (%) to rotate 45 degrees to the left.

Then at the end of the animation timeline (100%) we want it to end up rotated 45 degrees to the right.

@keyframes rotate {
  0% {
    transform: rotate(-45deg)
  }
  100% {
    transform: rotate(45deg)
  }
}

Now that we have our @keyframe animation configured,

just need to use it on the .element. We are definining the animation to be 2 seconds

and also run it infinitely.

.element {
  animation: rotate 2s infinite;
  background-color:#eee;
  width: 200px;
  height: 200px;
}

Example #1: Loading rotation animations

The most common use of rotation animations is with loading icons. In the below we create a circular element.

Then add a ball that will rotate 360 degrees around the circular track. This can be acheived with the following

@keyframe.

@keyframes loading {
  0 {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

Example #2: Loading animations with CSS orbit rotation

The below example shows another loading animation that we can do with CSS rotates.

This one mimics a orbit animation. We use the same @keyframe animation as above - eg rotate(360deg).

However for this one - we have 2 elements rotating, giving the impression of a orbit.

Example #3: Hamburger menu with CSS rotate animation

The below example is of a hamburger menu navigation. Hamburger menu navigation is a way to display navigation menu items.

They are used for mobile devices/ smaller screens.

However they have been popping up on desktop websites aswell.

When you click on the menu/ icon, it will transform from three lines to a cross. They are called hamburger because when

stacked, the icon looks like a hamburger - 2 buns at the top and bottom and a patty in the middle. The below uses CSS rotate

animation to create a cross when a user clicks on the menu.

This uses JavaScript and CSS keyframes to define the rotation of each of the lines to be 45 degrees.

So when the user clicks on the hamburger menu, we assign a .open class.

When it is .open, we rotate the middle hamburger lines and hide the other lines so that it appears like a cross.

Explanation of the rotate() function

The input for the rotate() CSS function accepts a degree value and indicates the angle of rotation.

So for example rotate(0deg) keeps the element at its original position. If you rotate(45deg) then that means the element will rotate 45 degrees clockwise - or “to the right”.

When you use a negative value, the element that rotates anti-clockwise or “to the left”.

For example, in the following codepen, the box will rotate 90 degrees left and then 90 degrees right:

.rotate-left {
	transform: rotate(-90deg)
}

.rotate-right{
	transform: rotate(90deg)
}

Why would you want to rotate animations?

When adding CSS rotation animations to your website, we want to also keep the following best practices

Don’t animate all the things - just because you can animate something - it doesn’t mean that you should. Animation could get in the way of the user or distort them.

Use of easings - make use of easings so that the animation looks realistic and smooth.

Keep animations between 200-500ms. Anything longer would make the user wait and irritate them most likely. Anything shorter, then the user will not notice it.

Final thoughts

Using CSS animations to rotate an element can be a quick and effective way to add nice interactions to your website/ user interface.

We have seen that they can be used as loading animations, hamburger menu open and closing interactions,

showing custom progress - such as progress of your skills in a portfolio website.

The rotate() function only takes a degree value and rotates the elements on the 2D plane.

It does not shift the layout of the page. When we put in a positive degree value, the element will got to the right, clockwise.

When we put in a negative degree value the element will go to the left, counter clockwise.

As with most things, using animations should be kept minimal to keep the site performant and does not disorient the user.

👋 About the Author

G'day! I am Huy a software engineer based in Australia. I have been creating design-centered software for the last 10 years both professionally and as a passion.

My aim to share what I have learnt with you! (and to help me remember 😅)

Follow along on Twitter , GitHub and YouTube