How to animate 4 stacked images to create an illusion of a spinning flywheel

Back home

This is a simple method that uses pure CSS to rotate image with a smooth transition.

flywheel animate

A client recently asked me to redesign one of their graphics. So, while I was doing that in Adobe Illustrator, I exported it as 4 layers, to animate it using a rotate effect on hover.

The result

The key to this process is that you must have 4 equal size perfectly square images to work with with a transparent background (PNG or WEBP). You first build out each image layer with its respective elements and then export the seperate layers. For example, my graphic contained the following 4 images.

The images

This image is the base (bottom layer)

image 1

This is the second layer

image 2

This is the third layer

image 3

This is the fourth layer

image 4

HTML structure required

  1. Insert all the images inside a DIV that has a position of ‘relative’ and assign it a class of something like ‘.flywheel-wrapper’.
  2. Images need to have a unique class such as ‘.image-1’ and ‘.image-2’ respectively, or you can just use the image IDs
  3. Ensure all images have a position of ‘absolute’ and that they are in the correct layered order – you may need to use z-index
  4. Assign a unique class to the images you want to rotate on hover – such as ‘.rotate-1’ and ‘.rotate-2’

Animate on hover

Apply the following CSS to the parent DIV that houses the images. This code will rotate only the classes ‘.rotate-1’ and ‘.rotate-2’, so if you need to rotate any of the other image layers, you’ll need to assign more ‘rotate-#’ classes and add its corresponding animate CSS to this code:

@keyframes rotateImage1 {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }

@keyframes rotateImage2 {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }

@keyframes rotateImage3 {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }

.parent-flywheel:hover .rotate-1 {
    animation: rotateImage1 2s ease forwards;

.parent-flywheel:hover .rotate-2 {
    animation: rotateImage2 2s ease forwards 0.5s;

.parent-flywheel {
transition: all 0.2s ease;

Have a project you'd like to discuss?

Book a discovery zoom call with Gerson.

Book Zoom Call