Rotating Elements with CSS

The CSS rotate() function skews an element by a certain number of degrees. You can rotate an element clockwise using a positive number of degrees. Or, you can rotate an element anti-clockwise using a negative number.

Today we’ll learn how to rotate elements with CSS. Why should we rotate an element? Rotating elements make your web page more interactive. Used correctly, a rotating element will add to the aesthetics of your site.

While reading this article, please refer to the accompanying repo, so you can see the concepts in action. Knowing how to rotate an element will be a valuable addition to your CSS toolbox.

CSS rotate()

The CSS rotate() function lets you rotate an element on a 2D axis. The rotate() function accepts one argument: the angle at which you want to rotate your web element. You can rotate an element clockwise or counter-clockwise.

Let’s take a look at the syntax for the rotate() function:

transform: rotate(angle);

The value “angle” represents the number of degrees the element should rotate. You can specify a rotate that is clockwise using a positive degree number (i.e. 45). Or, you can rotate in the opposite direction using a negative degree value (i.e. -39).

The rotate() function can apply to any HTML element. For instance, you could rotate a paragraph of text. Or you could rotate an image.

A HTML rotate appears as soon as you render the page so there is no visible rotate. To view the rotating in action, you should use a CSS transition. Transitions change the state of an element when an action is taken, such as when a cursor hovers over an element.

rotate() CSS Example

Let’s go ahead and create our HTML page on which to place a rotating box. Let’s add a box as a div and give it a class (let’s name it “rotate”).

<div class="rotate"></div>

Now let’s add some styling to it:

div.rotate {
    width: 50px;
    height: 50px;
    background-color: chocolate;
}

Refresh. Cool, we have a colored box. With this colored box, we have all that we need to start using the rotate() function.

In order to rotate our box, we need to discuss the transform property first.

The CSS transform function as the name implies, transforms elements. One of the functions we can apply to it, is rotate(). The transform property can take many other functions and there are many things we can do with transform. Rotate is just one of them.

The rotate function moves an element. It takes one argument: the number of degrees we want to skew the element. Let’s go ahead and apply a 35-degree positive rotation:

div.rotate {
    width: 50px;
    height: 50px;
    background-color: chocolate;
    transform: rotate(35deg); 
}

We rotated our box! Tap yourself on the back.

When to Use the CSS Transform rotate() Function

Rotate allows for fancy UI ideas or rotating images. For example, you can rotate 180 degrees an image. If you need that rotated image somewhere else just save it and use it accordingly.

Another thing you can rotate is text. Let’s say you are creating a layout that mimics a magazine, you can actually rotate the text to add emphasis to text elements. 

And that is not all you can do with rotate(). The rotate function allows us to do some really cool animations!

Let’s go ahead and use the CSS :hover selector on our div to actually apply a nice rotation effect:

.rotate:hover {
    transform: rotate(35deg); 
    background-color: deeppink;
}

Isn’t this cool? 😎

Our box rotates when we hover over it with a mouse. We use the background-color CSS property to change the color of our box when we hover over it.

Conclusion

The CSS rotate() function makes a web element appear at an angle. This function accepts one argument: the number of degrees the element should be rotated. You can specify either a positive or negative degree value.

Rotating elements lets you make your web pages more aesthetically pleasing. For instance, you may apply a rotate to a box when the user hovers over it with their cursor. Or you may decide to rotate a link when a user hovers over it with their mouse. It’s up to you how you use this skill!

Are you interested in learning more about CSS? Check out our complete How to Learn CSS guide for expert advice and guidance on top learning resources.