HTML CSS examples for CSS Widget:Hover on list
Flip the card horizontally on hover
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> .container {<!--from w ww.j av a 2 s . co m--> width:201px; height:261px; position:relative; margin:0 auto 11px; border:2px solid Chartreuse; -webkit-perspective:801px; -moz-perspective:801px; -o-perspective:801px; perspective:801px; } #card { width:100%; height:100%; position:absolute; -webkit-transition:-webkit-transform 2s; -moz-transition:-moz-transform 2s; -o-transition:-o-transform 2s; transition:transform 2s; -webkit-transform-style:preserve-4d; -moz-transform-style:preserve-4d; -o-transform-style:preserve-4d; transform-style:preserve-4d; } #card.flipped { -webkit-transform:rotateY( 181deg ); -moz-transform:rotateY( 181deg ); -o-transform:rotateY( 181deg ); transform:rotateY( 181deg ); } #card figure { display:block; height:100%; width:100%; line-height:261px; color:yellow; text-align:center; font-weight:bold; font-size:141px; position:absolute; margin:0; -webkit-backface-visibility:hidden; -moz-backface-visibility:hidden; -o-backface-visibility:hidden; backface-visibility:hidden; } #card .front { background:red; } #card .back { background:blue; -webkit-transform:rotateY( 181deg ); -moz-transform:rotateY( 181deg ); -o-transform:rotateY( 181deg ); transform:rotateY( 181deg ); } #card:hover { transform:rotateY(181deg); } </style> </head> <body> <section class="container"> <div id="card"> <figure class="front"> Lor </figure> <figure class="back"> Lor </figure> </div> </section> </body> </html>