javascript - CSS/js Flip Cards -


i have card cover , of card. how can flip card cover click on button, like this?

here demo

probably need

html

<div class="flip3d">   <div class="back">box 1 - back</div>   <div class="front">box 1 - front</div> </div>  

css

.flip3d{ width:240px; height:200px; margin:10px; float:left; } .flip3d > .front{ position:absolute; -webkit-transform: perspective( 600px ) rotatey( 0deg ); transform: perspective( 600px ) rotatey( 0deg ); background:#fc0; width:240px; height:200px; border-radius: 7px; -webkit-backface-visibility: hidden; backface-visibility: hidden; transition: -webkit-transform .5s linear 0s; transition: transform .5s linear 0s; } .flip3d > .back{ position:absolute; -webkit-transform: perspective( 600px ) rotatey( 180deg ); transform: perspective( 600px ) rotatey( 180deg ); background: #80bfff; width:240px; height:200px; border-radius: 7px; -webkit-backface-visibility: hidden; backface-visibility: hidden; transition: -webkit-transform .5s linear 0s; transition: transform .5s linear 0s; } .flip3d:hover > .front{ -webkit-transform: perspective( 600px ) rotatey( -180deg ); transform: perspective( 600px ) rotatey( -180deg ); } .flip3d:hover > .back{ -webkit-transform: perspective( 600px ) rotatey( 0deg ); transform: perspective( 600px ) rotatey( 0deg ); } 

http://jsfiddle.net/gddts/9444/


Comments

Popular posts from this blog

cakephp - simple blog with croogo -

How to group boxplot outliers in gnuplot -

bash - Performing variable substitution in a string -