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.
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
<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
<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
<style>
.rotate-box {
width: 200px; height: 50px;
border: 2px solid #aaa;
background: #feffd6;
transform: rotate(-10deg)
}
</style>
<div class="rotate-box">Hello World!</div>
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
<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 withto { transform: rotate(360deg) }
. - This should be pretty self-explanatory, it will just spin the image in circles.
- The keyframes should start with
- 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
<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
<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
- Transform – MDN
- Rotate – MDN
- Using CSS animations – CSS: Cascading Style Sheets – MDN
TUTORIAL VIDEO
INFOGRAPHIC CHEATSHEET

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!
Thanks a bunch. I have modified my website with a bit of animation, thanks to your guidance. Much appreciated!
This is awesome! thanks for making this guide!!