.flip_container{ width: 128.297px; height: 73.8906px; } .flip_container:hover .flip { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } .flip { -webkit-transition: 0.5s; transition: 0.5s; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; position: relative; } .flip_front, .flip_back { -webkit-backface-visibility: hidden; backface-visibility: hidden; position: absolute; top: 0; left: 0; } .flip_front { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } .flip_back { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); }
<div class="flip_container"'> <div class="flip" style="width: 50%;"> <div class="flip_front" style="font-size:0.6em"> Hello </div> <div class="flip_back" style="font-size:0.6em"> World </div> </div> </div>
var
This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)