Creating Flipable Card Using HTML/CSS/JS

You can create flipable card easily by tracking these steps.

HTML file:

<div class="wordCard">
    <div class="cardFace frontFace">
        <span>front</span>
    </div>
    <div class="cardFace backFace">
        <span>back</span>
    </div>
</div>

CSS file:

.wordCard {
    width: 200px;
    height: 300px;
    position: relative;
    perspective: 1000px;
    cursor: pointer;
}

.cardFace {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    color: white;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transition: transform .5s linear;
    transform-style: preserve-3d;
}

.backFace {
    background-color: blue;
    transform: rotateY(180deg);
}

.frontFace {
    background-color: green;
    transform: rotateY(0deg);
}

.flipped .backFace {
    transform: rotateY(360deg);
}

.flipped .frontFace {
    transform: rotateY(180deg);
}

We have two type faces. Normal and flipped faces.

Our important property is backface-visibilty: hidden;. This property helps us to hide back face of element.

Other important property is transform-style: preserve-3d;. This property gives 3D rotate effect to element when it is rotating.

And JavaScript file:

var card = document.querySelector('.wordCard');
card.addEventListener('click', () => {
    card.classList.toggle('flipped');
});

In above, we set click event to toggle .wordCard class. In this way, we could animate this card with transition duration.