Rotate & Spin An Image In HTML CSS (Simple Examples)

Welcome to a tutorial on how to rotate images in HTML and CSS. So you have an image or logo that needs to be rotated, or maybe even animated. But it is too much trouble to go through all that crazy image editing and creating an animated GIF. Good news, it is possible to rotate images in modern CSS.

To can rotate an image in CSS, simply use the transform rotate property. For example, img.rright { transform: rotate(90deg) }

That covers the basics, but we can actually do more and animate a spinning image using rotate. Let us walk through more examples in this guide – Read on!

ⓘ I have included a zip file with all the example source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

 

 

TLDR – QUICK SLIDES

Fullscreen Mode – Click Here

 

TABLE OF CONTENTS

 

 

DOWNLOAD & NOTES

Firstly, here is the download link to the example code as promised.

 

QUICK NOTES

If you spot a bug, feel free to comment below. I try to answer short questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

 

EXAMPLE CODE DOWNLOAD

Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

CSS ROTATE IMAGES

All right, let us now get into the basic examples of how to use CSS rotate.

 

BASIC ROTATE IMAGE

1a-basic-rotate.html
<style>
.ro-cw-90 { transform: rotate(90deg) }
.ro-ccw-90 { transform: rotate(-90deg) }
</style>

<img src="rocket.png">
<strong>No rotate</strong><br>
 
<img src="rocket.png" class="ro-cw-90">
<strong>Rotate 90 degrees clockwise</strong><br>

<img src="rocket.png" class="ro-ccw-90">
<strong>Rotate 90 degrees counter-clockwise</strong><br>

No rotate

Rotate 90 degrees clockwise

Rotate 90 degrees counter-clockwise

Yep, it’s that simple. Just add transform: rotate(N deg) to the image to rotate it – A positive degree will rotate the image in the clockwise direction, and a negative degree to rotate it in the counter-clockwise direction.

 

 

ROTATE IN THE 3D SPACE

1b-rotate-3D.html
<style>
.ro3D { transform: rotateX(60deg); }
</style>

<img src="rocket.png" class="ro3D">

Apart from the “basic rotate”, here is something a little bit more interesting – We can actually simulate a 3D rotation using rotateX, rotateY, and rotateZ.

 

ROTATE CAN BE APPLIED TO ANYTHING

1c-rotate-element.html
<style>
.rotate-box {
  width: 200px; height: 50px;
  border: 2px solid #aaa;
  background: #feffd6;
  transform: rotate(-10deg)
}
</style>

<div class="rotate-box">Hello World!</div>
Hello World!

Finally, here is kind of a “Captain Obvious” thing. Rotate is not just restricted to images, it will also work with pretty much every other HTML element.

 

 

ADDING ANIMATIONS – SPINNING IMAGES

So far so good? With the basics out of the way, let us now get into something a little more “advanced” – Doing spin animations using CSS rotate.

 

SPIN ANIMATION

2a-endless-spin.html
<style>
@keyframes spinning {
  from { transform: rotate(0deg) }
  to { transform: rotate(360deg) }
}
.spin {
  animation-name: spinning;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  /* linear | ease | ease-in | ease-out | ease-in-out */
  animation-timing-function: linear;
}
</style>

<img src="rocket.png" class="spin">

For you guys who are looking to catch some attention using a spinning image, we can easily create one using CSS rotate with animation:

  • First, we have to define the animation @keyframes spinning.
    • The keyframes should start with from { transform: rotate(0deg) }, end with to { transform: rotate(360deg) }.
    • This should be pretty self-explanatory, it will just spin the image in circles.
  • Next, we attach the animation sequence to the CSS class animation-name: spinning.
  • The rest should be easy to understand as well:
    • animation-duration controls the speed of the animation.
    • animation-iteration-count: infinite will just keep on spinning the image.
    • animation-timing-function controls how the animation will look like. Feel free to change this and see how the others work.

 

 

SPIN ON HOVER

2b-spin-hover.html
<style>
@keyframes spinning {
  from { transform: rotate(0deg) }
  to { transform: rotate(360deg) }
}
.spinhov:hover {
  animation-name: spinning;
  animation-duration: 1s;
  animation-iteration-count: 1;
  /* linear | ease | ease-in | ease-out | ease-in-out */
  animation-timing-function: ease-in-out;
}
</style>

<img src="rocket.png" class="spinhov">
<strong>Hover to spin</strong>

Hover to spin

This is a rather interesting “remix” of the above. Simply attach the animation to a :hover pseudo-class, and the spin animation will only be applied on mouseover. Good for adding some flair to otherwise boring buttons.

 

 

SPIN IN 3D

2c-spin-3d.html
<style>
@keyframes spin3D {
  from { transform: rotateY(0deg) }
  to { transform: rotateY(360deg) }
}
.spinhov3D:hover {
  animation-name: spin3D;
  animation-duration: 1s;
  animation-iteration-count: 1;
  /* linear | ease | ease-in | ease-out | ease-in-out */
  animation-timing-function: ease-in-out;
}
</style>

<img src="rocket.png" class="spinhov3D">
<strong>Hover to spin</strong>

Hover to spin

We don’t live in the Stone Age of the Internet anymore. Yes, creating a 3D spin effect is as easy as changing the @keyframes to use the “3D counterparts” of rotating instead – rotateX rotateY rotateZ.

 

EXTRA BITS & LINKS

That’s all for this guide, and here is a small section on some extras and links that may be useful to you.

 

LINKS & REFERENCES

 

TUTORIAL VIDEO

 

INFOGRAPHIC CHEATSHEET

How To Rotate Images With CSS (Click To Enlarge)

 

THE END

Thank you for reading, and we have come to the end of this guide. I hope that it has helped you with your project, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!

2 thoughts on “Rotate & Spin An Image In HTML CSS (Simple Examples)”

  1. Thanks a bunch. I have modified my website with a bit of animation, thanks to your guidance. Much appreciated!

Leave a Comment

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