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

Popular posts from this blog

basic authentication with http post params android -

vb.net - Virtual Keyboard commands -

css - Firefox for ubuntu renders wrong colors -