Stylish Flip Card Using Pure Css

<style> .card { width: 200px; height: 200px; perspective: 800px; } .card-inner { width: 100%; height: 100%; transition: transform 0.6s; transform-style: preserve-3d; } .card:hover .card-inner { transform: rotateY(180deg); } .card-front, .card-back { width: 100%; height: 100%; position: absolute; backface-visibility: hidden; display:flex; align-items: center; justify-content: center; border-radius: 5px; } .card-front { background-color: #ccc; } .card-back { background-color: #ff0000; transform: rotateY(180deg); } </style> <div class="card"> <div class="card-inner"> <div class="card-front"> Front Side </div> <div class="card-back"> Back Side </div> </div> </div>