javascript - CSS/js Flip Cards -
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 ); }
Comments
Post a Comment