<div class="flip-container"> <div class="front-side">Front Side</div> <div class="back-side">Back Side</div> </div> <div class="flip-container"> <div class="front-side">Front Side</div> <div class="back-side">Back Side</div> </div> <div class="flip-container"> <div class="front-side">Front Side</div> <div class="back-side">Back Side</div> </div> <div class="flip-container"> <div class="front-side">Front Side</div> <div class="back-side">Back Side</div> </div> <div class="flip-container"> <div class="front-side">Front Side</div> <div class="back-side">Back Side</div> </div>
* { box-sizing: border-box;} .flip-container { float: left; position: relative; margin-right: 10px; margin-bottom: 10px; perspective: 1000px; -webkit-perspective: 1000px; } .flip-container:lash-chid { margin-right: 0; } .flip-container, .flip-container .front-side, .flip-container .back-side { width: 180px; height: 150px; } .flip-container .front-side, .flip-container .back-side { position: absolute; top: 0; left: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: 1.2s; -webkit-transition: 1.2s; color: #fff; font-size: 48px; text-align: center; padding-top: 20px; } .flip-container .back-side { background-color: #333; z-index: 1; transform: rotateY(180deg); -webkit-transform: rotateY(180deg); } .flip-container .front-side { background-color: #5d3696; z-index: 2; transform: rotateY(0deg); -webkit-transform: rotateY(0deg); } .flip-container:hover .front-side { transform: rotateY(-180deg); -webkit-transform: rotateY(-180deg); } .flip-container:hover .back-side { transform: rotateY(0deg); -webkit-transform: rotateY(0deg); }