There’s a lot of flipping card implementations around the web. Flipping cards or tiles can be very useful these days.
The most common use-case for flipping cards and tiles that I can think of would be including some kind of imagery on the front, and some info on the back. We will ultimately need two different element wrappers contained inside a parent element, but the elements you decide is up to you.
HTML Code
<div class="card-container"> <div class="card"> <div class="side">...</div> <div class="side back">...</div> </div> </div>
CSS Code
.card-container { height: 150px; perspective: 600; position: relative; width: 150px; } .card { height: 100%; position: absolute; transform-style: preserve-3d; transition: all 1s ease-in-out; width: 100%; } .card:hover { transform: rotateY(180deg); } .card .side { backface-visibility: hidden; height: 100%; position: absolute; width: 100%; } .card .back { transform: rotateY(180deg); }
Result Image :
Enjoy Coding........... Try Yours...
Sign up here with your email
ConversionConversion EmoticonEmoticon