Rotating Images with CSS

Have you ever found an image but wanted to display it flipped the other way? Previously you would have used your favourite image editor to create a new image that was flipped. These days it is now possible to rotate an image with CSS using the transform property.

An advantage of using the ‘transform’ property, would be if you had an arrow that pointed to the left but you also needed the same arrow pointing to the right, by using ‘transform’ you would not need to load two separate images, therefore saving resources when loading a webpage. By using less requests to load a webpage, your site should load and display quicker.

Using the following code will display our image as it should be seen.

.image_std {
    background: url(arrow.png) no-repeat;
    width:32px; height:32px;

The result would be:

Now lets say that we wanted to display this arrow pointing to the left, we would use the following code:

.image_left {
    background: url(arrow.png) no-repeat;
    width:32px; height:32px;
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);

The result would be:

We can also then display this arrow pointing up or down with the follow code:

.image_up {
    background: url(arrow.png) no-repeat;
    width:32px; height:32px;
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    transform: rotate(270deg);
.image_down {
    background: url(arrow.png) no-repeat;
    width:32px; height:32px;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);

The result would be:

As can be seen, it is quite simple to rotate any image, I have just showed you the basic rotations of 90, 180 and 270 degrees, but obviously you can set the image to any degree you want.

You can play with this example by clicking the following button.


You can also rotate text with the ‘transform’ property, check out our text rotate generator to see how it is done.

3 Responses to Rotating Images with CSS

  1. Dale says:

    Thanks for the post! I’ve been trying to do this for a long time since I found out about this property. For anyone that is having trouble understanding the CSS, I found this website where you can use an UI to make it as well.

Leave a Reply

Your email address will not be published. Required fields are marked *