how to make 3d flip card in css

how to make 3d flip card in pure css

6th May 2020, 4:14 AM
Venkadesh. A
Venkadesh. A - avatar
1 Answer
First, let's say we have this html code : <div class="flip-box"> <div class="flip-box-inner"> <div class="flip-box-front"> <h2>Front Side</h2> </div> <div class="flip-box-back"> <h2>Back Side</h2> </div> </div> </div> Set css : first set div class name flip-box, but perspective makes object more the 3d effect. .flip-box { background-color: transparent; width: 300px; height: 200px; border: 1px solid #f1f1f1; perspective: 1000px; } Now set class flip-box-inner, in which main is transition and transform. .flip-box-inner { position: relative; width: 100%; height: 100%; text-align: center; transition: transform 0.8s; transform-style: preserve-3d; } On hover effect rotate it in Y-axes. .flip-box:hover .flip-box-inner { transform: rotateY(180deg); } .flip-box-front, .flip-box-back { position: absolute; width: 100%; height: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; } On hover out set to front page. .flip-box-back { background-color: dodgerblue; color: white; transform: rotateY(180deg); } I hope this will help you. Thanks!!!
6th May 2020, 5:32 AM
Shaili Shah
Shaili Shah - avatar