Pure CSS Card Flip Hover Effect

9/2/2018 | Programming

Today we’re going to look at a pretty simple, CSS-only way to achieve a card-flipping effect. The goal is that on hovering over the card, it flips around to reveal content on the back. Let’s get started!

CSS Transforms

CSS provides us with 2D and 3D transform properties that can be used to achieve some awesome effects! The only problem is, if you’re new to it, they can be a bit daunting. Let’s understand the basics!

2D transforms include translate, rotate, scale, skew, and matrix. Let’s focus on the first three. With translate, rotate, and scale, you have two axises: X (horizontal) and Y (vertical). The example below gives you and idea of how each of these transforms affect each axis.

As you can see, there’s little visual difference between the last two. If you rotateZ, the block will appear to get thinner, but you could do that with scaleX, right?

You could! And the effect is the exact same, until you change your perspective a bit…

Perspective

The CSS perspective property gives life to 3D transforms. We add it to a parent, and it’s applied to its children. Suddenly, rather than just a boring flattening look when we rotateZ, the block skews and gives us a life-like 3D effect. I bet you’re not shocked, but this is the basis of our card-flipping effect.

Something to note: perspective is a touchy and strange property. For example only works on the parent element. If you apply perspective to the element you’re transforming, there’s no effect. Also, its values are a bit odd (at least to me, anyway). At about 1000px you achieve a near-perfect ortholinear perspective (meaning, no perspective at all – the flat look from earlier). At 1px you achieve wildly skewed lines that are basically unmanageable. For our case, we’ll look right in the middle, 500px.

All Together Now!

Let’s start building this thing! First, our markup: We’ll need a div to represent the front of the card, the back of the card, and a wrapper. The wrapper is what we’ll actually transform, so that we only have to do it once, and let the “faces” of the card hold content, images, etc. For our example, we’ll go for something like this:

1<div class="card">
2  <div class="card__front"></div>
3  <div class="card__back">Content!</div>
4</div>

Now for some styling, we’ll need to lay these faces over top of each other before we move forward. We also want them to be the same size – the size of the wrapper. This is easily done by setting some positions. I’ve also set one face to pink and one to lightblue so we can see what’s going on a little easier.

1.card {
2  height: 200px;
3  width: 200px;
4  position: relative;
5}
6
7.card > div {
8  position: absolute;
9  top: 0;
10  left: 0;
11  height: 100%;
12  width: 100%;
13}
14
15.card__front {
16  background: pink;
17}
18
19.card__back {
20  background: lightblue;
21  display: flex;
22  align-items: center;
23  justify-content: center;
24}

Now let’s put all this transform knowledge to work! We’ll start with a rotateX on the wrapper, and some perspective on the body so we can see what’s happening.

1.body {
2  perspective: 500px;
3}
4
5.card {
6  height: 200px;
7  width: 200px;
8  position: relative;
9  transform: rotateX(.25turn);
10}

Looking good! Now let’s animate that so we can see how we’re really looking. We’re just using simple transitions to animate the transform on hover. I’ve also added a subtle drop shadow that gets bigger and blurrier for effect, and a subtle scale to push the idea that this card is flipping over and headed your way.

1.card {
2  height: 200px;
3  width: 200px;
4  position: relative;
5  transform: rotateX(.25turn);
6  transition: .5s all ease-out;
7  box-shadow: 0 2px 4px rgba(0,0,0,.3);
8}
9
10.card:hover {
11  transform: rotateY(.5turn) scale(1.2);
12  box-shadow: 0 10px 30px rgba(0,0,0,.16);
13}

Now we’re talking! The only problem is, we can see the back of the card at all times – and it’s backwards! No worries, we just need to hide it.

We’ll use some opacity on the .card__back element and a separate transition to show it when the side of the card is straight on with the screen, giving the effect that the card has been flipped! Note that we’re using a bit of CSS magic with the transition-delay property. That allows us to time exactly when to show the backside of the card.

1.card__back {
2  background: lightblue;
3  opacity: 0;
4  transition-delay: .17s;
5  display: flex;
6  align-items: center;
7  justify-content: center;
8}

Now when the card flips around, the back side is shown at just the perfect time! Only problem - it’s backwards. Easy enough with another (this time 2D) transform on just the .card__back element. Now our card flips to reveal cool, correctly-facing content.

1.card__back {
2  background: lightblue;
3  opacity: 0;
4  transition-delay: .17s;
5  display: flex;
6  align-items: center;
7  justify-content: center;
8  transform: rotateY(.5turn);
9}

Neat! All except that jitter if you don’t hover over it just right…

[graphic example - gif jittery card]

Jitter Bugs

This one bugged (pun intended) me for a while. The final and simplest solution is just to wrap the entire card in another container, its only purpose being to capture hover states and pass it on.

1<div class="hover-area">
2  <div class="card">
3    <div class="card__front"></div>
4    <div class="card__back">Content!</div>
5  </div>
6</div>
7

Now instead of .card:hover, we use .hover-area:hover. This way we’re not “hovering out” of the card if our mouse just accidentally gets out of it (which is easy to do at the apex of the flip). Instead, we’re always inside that hover-area, and the effect can stay smooooooooth.

Here’s the final result on CodePen (plus some added fun):

Hopefully this can be helpful if you, like myself, ever have a client who wants an effect like this on content card, be it events, blog posts, Tweets, an Instagram feed or something else!

Anything I could do better? Thoughts or improvements? Drop me a line in the comments below!