Flip Card Effect CSS

Timi — Wed, 08 Nov 2023 16:09:07 +0000


<div class="maincontainer">
    <div class="thecard">
        <div class="thefront">front of card</div>
        <div class="theback">back of card</div>
    </div>
</div>


.maincontainer {
    position: relative;
    width: 250px;
    height: 350px;
    /*background: green;*/
}
.thecard {
    position: absolute;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: all 0.5s ease;
    /*background: yellow;*/
}
.thecard:hover{
    transform: rotateY(180deg);
}

.thefront {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility:hidden;
    background: #ffc728;
    color: #333;
    /* Styling up the card */
    text-align: center;
    font-family: sans-serif;
    border-radius: 20px;
    font-size: 1.2rem;
    font-weight: bold;
}
.theback {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility:hidden;
    background: #5fcf80;
    color: #fff;
    transform: rotateY(180deg);
    /* Styling up the card */
    text-align: center;
    font-family: sans-serif;
    border-radius: 20px;
    font-size: 1.2rem;
    font-weight: bold;
}

DEV Community: Timi

Flip Card Effect CSS