Flip Cards

Flip cards are cards that you click or hover on and then flip over and show you what's on the back. They look really cool, but are surprisingly easy to do.

I am going to do one using click because using hover is a problem: what if you don't have any way of hovering? You can use focus instead, but that still won't help on a mobile. So then you'd need a completely different card structure, in which case you might as well just use that on desktop too.

The HTML

<button class="card">
  <div class="card-front">Front</div>
  <div class="card-back">Back</div>
</button>

Here we have a card and inside it is the front and the back. But the card itself is a button. That means you can focus on it using the keyboard. And later, the JavaScript click event will work just as well pressing Enter or Space when it's focussed as it does clicking on it.

You might say it's a card rather than a button. But it does do something when you click on it, which is what a button is for.

The CSS

.card {
  width: 200px;
  height: 300px;
  position: relative;
  cursor: pointer;
  perspective: 1000px;
  transform-style: preserve-3d;
  transition: rotate 500ms linear;
}

.card.show {
  rotate: y 180deg;
}

.card-front,
.card-back {
  border: 5px solid #000000;
  padding: 0.5em;
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  backface-visibility: hidden;
}

.card-front {
  background-color: pink;
}

.card-back {
  background-color: aliceblue;
  rotate: y 180deg;
}

There's a lot going on here. First of all I've set a width and height on the card. It doesn't have much text, so otherwise it would be tiny. Usually you wouldn't need this because your card would have real content.

The card's position is set to relative because the front and back will be absolutely positioned within it. The cursor is a pointer so when you hover it becomes clear you can click. Although in a real world situation you'd need something else, as users might not be able to hover, or might just not hover.

The perspective, transform-style and transition are all used to flip the card and make it look like you're turning a real card over. perspective governs how far away from the card you are. The transform-style is needed to make the back show: without it it would turn over to show you the back of the front side.

When you click, JavaScript will add the class 'show' to the card, telling it to rotate around the y axis, ie turning it over.

For the front and back I've added some colours, positioned them so they both fill the card and so the text is in the centre of the card.

The important parts here are the backface-visibility, as without this the back would be visible. And since it's later than the front in the HTML, it's the only thing you'd see. Then the back is rotated, so if it was visible it would be the wrong way round. But it means when the whole card is rotated, the back is then rotated as well so it appears the right way round.

The JavaScript

const card = document.querySelector(".card");

card.addEventListener("click", function () {
  card.classList.toggle("show");
});

This is pretty simple. It's just saying that if you click the card it adds the class 'show' to the card. If you click it again it removes that class.

The final code

Here's the whole thing in Codepen: