</> Michael Burrows

How to create an animated flip card with CSS 3D transforms

Last modified on September 11th 2020 GitHub [Source] CodePen [Demo]

Flip cards can be created using just HTML & CSS.

They can be used in a number of ways to display more information to a user on hover.

In this example we’ll create a flip card with an image on the front and text on the back.

Flip Card CSS

First let’s start with the HTML:

<div class="flip"> <div class="flip-content"> <div class="flip-front"> <img src="https://www.fillmurray.com/150/150" /> </div> <div class="flip-back"> <strong>BILL MURRAY</strong> </div> </div> </div>

Next add the following CSS:

.flip { width: 150px; height: 150px; text-align: center; perspective: 600px; } .flip-content { width: 100%; height: 100%; transition: transform 0.4s; transform-style: preserve-3d; } .flip:hover .flip-content { transform: rotateY(180deg); transition: transform 0.3s; }
  • If you’re creating a card larger that 150×150 you’ll need to increase the perspective.
  • You can speed up or slow down the animation by changing transition speed .
  • For a 360 spin effect change the rotation to 360deg – this works well with single sided buttons.

If you preview what we have done so far in the browser you’ll see the text and image flip into a reversed state.

To achieve our desired full flip card effect this additional CSS is required:

.flip-front, .flip-back { position: absolute; height: 100%; width: 100%; line-height: 150px; backface-visibility: hidden; color: #fff; background-color: lightseagreen; border: 6px solid lightcoral; box-shadow: 6px 6px lightseagreen; } .flip-back { transform: rotateY(180deg); border: 6px solid lightseagreen; box-shadow: 6px 6px lightcoral; }