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.

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

 

 

 

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.

 

 

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>

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.

 

 

 

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 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

<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>

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>

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.

 

 

LINKS & REFERENCES

• Transform – MDN
• Rotate – MDN
• Using CSS animations – CSS: Cascading Style Sheets – MDN

 

TUTORIAL VIDEO

 

INFOGRAPHIC CHEATSHEET