DEV Community

Cover image for Creating Flipable Card Using HTML/CSS/JS
Kaan Kuscu
Kaan Kuscu

Posted on

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">
    <div class="cardFace backFace">
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

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', () => {
Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)