Efecto flip 3d con css3 FLIP FLOP <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <head> <meta charset="utf-8"> </head> <html xmlns="http://www.w3.org/1999/xhtml"> <body> <style> .cube {width: 100px;text-align: center;margin: 0 auto;height: 100px; -webkit-transition: -webkit-transform .33s; transition: transform .33s; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .cube .flip, .cube .flop {border:1px solid #cdcdcd; text-align:center; background:#CE4848;color:#fff; font-weight:bold;border-radius: 5px;height: 100px;} .cube .flip { -webkit-transform: translateZ(50px); transform: translateZ(50px); } .cube .flop { -webkit-transform: rotateX(-90deg) translateZ(-50px); transform: rotateX(-90deg) translateZ(-50px); } .cube:hover { -webkit-transform: rotateX(89deg); transform: rotateX(89deg);cursor:pointer; } </style> <div class="cube"> <div class="flip"> FLIP </div> <div class="flop"> FLOP </div> </div> </body> </html>
