javascript - Verticle flip action for div in JQuery.. -
i want vertical flip action div flips using javascript. please suggest me. should work browsers
this html code:
<div class="flip"> <div class="card"> <div class="face front"> front<br> other text.<br> other text.<br> other text.<br> other text. </div> <div class="face back"> </div> </div>
this javascript:
$('.flip').click(function(){ $(this).find('.card').toggleclass('flipped'); return false; });
this css supports chrome & safari:
body { background: #ccc; } .flip { -webkit-perspective: 800; width: 400px; height: 200px; position: relative; margin: 50px auto; } .flip .card.flipped { -webkit-transform: rotatex(-180deg); } .flip .card { width: 100%; height: 100%; -webkit-transform-style: preserve-3d; -webkit-transition: 0.5s; } .flip .card .face { width: 100%; height: 100%; position: absolute; -webkit-backface-visibility: hidden ; z-index: 2; font-family: georgia; font-size: 3em; text-align: center; } .flip .card .front { position: absolute; z-index: 1; background: black; color: white; cursor: pointer; } .flip .card .back { -webkit-transform: rotatex(-180deg); background: blue; background: white; color: black; cursor: pointer; }
i have code not working browsers.
Comments
Post a Comment