Day # 67: Card flip

While working on a previous project that involved cards, I came across the flip effect, so I decided to incorporate it in today’s project.

In order to achieve that effect, we basically need to focus on the rotateY value of the transform property:

.card__inner.is-flipped {

    transform: rotateY(180deg);

}

We can assign that class to the card by using Javascript:

card.addEventListener('click', function() {

    card.classList.toggle('is-flipped')

})

Finally, to get a more sophisticated flip effect, we need to add the CSS property of perspective to the card:

.card {

    margin: 100px auto 0;

    width: 400px;

    height: 600px;

    perspective: 600px;

}