JSFiddle - React, Tailwind, and code Playground

by HYEONGJINKIM

HTML

<div id="flip">
    <div class="front"></div>
    <div class="back"><a href="#">Some HTML content here...</a></div>
</div>

CSS

#flip {
    position: absolute;
    z-index: 11;
    perspective: 300px;
    transform-style: preserve-3d;
}
#flip .front,
#flip .back {
    border-radius: 105px;
    background: #333;
    width: 105px;
    height: 105px;
    display: block;
    position: absolute;
    color: #fff;
    transition: transform 1s ease-in-out;
}
#flip .front {
    transform: rotateX(0deg);
    backface-visibility: hidden;
    z-index: 13;
}
#flip:hover .front {
    transform: rotateX(180deg);
}
#flip .back {
    transform: rotateX(-180deg);
    backface-visibility: hidden;
    z-index: 12;
    background: red;
}
#flip:hover .back {
    transform: rotateX(0deg);
    z-index: 14;
}