How to 3D Flip Images With CSS

How to 3D Flip Images With CSS

Flipping images with CSS transforms
Ferenc Almasi • 2022 November 04 • 📖 3 min read

Flipping images with CSS can be achieved by using transform rules. In order to flip an image with CSS, we need to have two separate containers. One for the front, and one for the back.

<div class="card">
    <div class="card-front"><img src="front.png" /></div>
    <div class="card-back"><img src="back.png" /></div>
</div>
The front and back of the card
Copied to clipboard!

The 3 div elements have the following purpose:

  • card: We need a container so that we can position everything to it relatively
  • card-front: The front of the image — this will be facing us initially
  • card-back: The back of the image — this will be facing away from us

To flip the images around, we will be using the transform property. For the .card itself, we need to add the dimensions we need (in this example, we are using 100x100px), and set its position to relative.  

.card {
    position: relative;
    width: 100px;
    height: 100px;
    cursor: pointer;
}
Copied to clipboard!

Although optional, adding cursor: pointer is a nice touch to indicate that the element is interactive. For the front and back of the cards, we will need them to be absolutely positioned, with a 100% width and height:

.card-front,
.card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    transition: transform .6s cubic-bezier(0.4, 0.0, 0.2, 1);
    backface-visibility: hidden;
}
Copied to clipboard!

The most important part, however, is the last two rules. We need to use a transition on the transform property to create an animation once we begin flipping the images. We are using a cubic bezier here for easing.

I recommend checking out easings.net and cubic-bezier.com if you want to experiment with different easing functions.  

The other important rule is backface-visibility. This is used for telling CSS that the back of an element should not be visible to us. This means we won’t see the image if the card is flipped.

How backface-visibility affects an element
How backface-visibility affects an element
Looking to improve your skills? Check out our interactive course to master JavaScript from start to finish.
Master JavaScript

Flipping Images in CSS With Transform

To rotate the back of the card into the correct position, we need to add a transform rule that rotates it 180 degrees on the Y axis. This will rotate the back of the card 180 degrees away from us.

.card-back {
    transform: rotateY(180deg);
}

.card:hover .card-front {
    transform: rotateY(180deg);
}

.card:hover .card-back {
    transform: rotateY(0);
}
Adding the transform rules for the flipping effect
Copied to clipboard!

When we hover over the container, we want to do the same for the front of the card, and do the opposite for the back: remove the rotateY and set it back to 0. With everything added, we should now have flipping images. Hover over the example below to see what the effect looks like.

🍅
🥔
Illustration of cards in 3d space

Adding Rotation to the Flip

However, the flip looks rather flat this way. We can easily get around this by also rotating the element on the Z axis. Change the transform rules to the following:

.card-back {
-   transform: rotateY(180deg);
+   transform: rotateY(180deg) rotateZ(50deg);
}

.card:hover .card-front {
-   transform: rotateY(180deg);
+   transform: rotateY(180deg) rotateZ(50deg);
}

.card:hover .card-back {
-   transform: rotateY(0);
+   transform: rotateY(0) rotateZ(0);
}
Adding rotateZ to add a rotation to the flip
Copied to clipboard!

Here we now also introduced a 50-degree rotation for the Z axis. Just like for the Y, we want to replicate the same logic. Whenever the image is flipped, we want to remove the rotation from the Z axis for the back of the card and add it for the front. This will create the following effect:

🍅
🥔
Grab the source code from Codepen
Did you find this page helpful?
📚 More Webtips
Frontend Course Dashboard
Master the Art of Frontend
  • check Unlimited access to hundred of tutorials
  • check Access to exclusive interactive lessons
  • check Remove ads to learn without distractions
Become a Pro

Recommended