How to Rotate an Image using Pure CSS

← Prev

You can use the transform property in CSS to rotate an element. In this post I’ll show you how using the transform property you can actually rotate an image at a given angle.

Rotate image using Pure CSS

Syntax of "transform" property

transform: rotate(angle)

The transform property uses different values to perform different tasks like rotating, skewing, scaling, translating and moving etc. Some of its common values are rotate, scale, translate, skew and matrix.

I’ll use the rotate() method here in my example to rotate an image.

<!DOCTYPE html>
<html>
<head>
<style>
    img {
        transform: rotate(20deg);
        -ms-transform: rotate(20deg);
        -webkit-transform: rotate(20deg);
        
        border: none;
    }
</style>
</head>
<body>
    <div>
        <img src='../../images/theme/css.png'>
    </div>
</body>
</html>
Try it

The above example rotates an image at a 20 degrees angle. It is just a little tilt. What you can do is, simply change the numeric value in the rotate() method to rotate the image according to your requirement.

👉 Now, using the same method, you can rotate an image or a group of images dynamically using JavaScript.

Using Inline method

If you want, you can apply the method using inline style. For example,

<img src='../../images/theme/css.png' style='transform: rotate(20deg);'>

Using Inline style you can put CSS rules inside the elements tag. That's how I have applied the transform property inside the <img /> tag.

Rotate Image using Animate Effect

I can also animatedly rotate an image in CSS. To do this I’ll use CSS3 @keyframes rules.

<!DOCTYPE html>
<html>
<head>
<style>
    img {
        -webkit-animation:2s animateImage infinite;
      	-moz-animation:2s animateImage infinite;
      	-o-animation:2s animateImage infinite;
      	animation:2s animateImage infinite;
        
        border: none;
    }
    
    @keyframes animateImage {
        20% {
            -webkit-transform: rotate(120deg);
            transform: rotate(120deg);
        }
    }
    
    @-webkit-keyframes animateImage {
        20% {
            -webkit-transform: rotate(120deg);
            transform: rotate(120deg);
        }
    }
</style>
</head>
<body>
    <div>
        <img src='../../images/theme/googlemaps.png'>
    </div>
</body>
</html>
Try it

Cool oscillation isn’t it. However, remember CSS3 animation is not available in IE 9 and earlier versions. See the browsers that support transform property and @keyframes rules, and yes, I have tested it.

Browser Support:
Chrome 39.0 - Yes | Firefox 34.0 - Yes | Internet Explorer 10 - Yes | Safari - Yes | Edge 89+ - Yes

I am sure you will like this example too: 👉 How to rotate an Image on HTML5 Canvas and save the image (after rotating) using JavaScript

That's it. Thanks for reading.

← Previous