/ Published in: CSS

URL: http://nettuts.s3.amazonaws.com/855_cssProperties/flipper.html
Expand |
Embed | Plain Text
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>Tuts</title> <style> body, html { height: 100%; width: 100%; } body { display: -moz-box; display: -webkit-box; display: box; -moz-box-orient: horizontaerl; /* the default, so not really necessary here */ -webkit-box-orient: horizontal; box-orient: horizontal; -moz-box-pack: center; -moz-box-align: center; -webkit-box-pack: center; -webkit-box-align: center; box-pack: center; box-align: center; } .box { background: #e3e3e3; border: 1px dashed #666; margin: auto; width: 400px; height: 200px; cursor: pointer; position: relative; -webkit-transition: all 1s; -moz-transition: all 1s; transition: all 1s; } .box::after { content: ''; position: absolute; width: 70%; height: 10px; bottom: 0; left: 15%; z-index: -1; -webkit-box-shadow: 0 9px 20px rgba(0,0,0,.4); -moz-box-shadow: 0 9px 20px rgba(0,0,0,.4); box-shadow: 0 9px 20px rgba(0,0,0,.4); } .box > div { position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: #e3e3e3; -webkit-transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; transition: all .5s ease-in-out; font: 45px/200px bold helvetica, arial, sans-serif; text-align: center; } /* Make sure we see the front side first */ .box > div:first-child { position: relative; z-index: 2; } .box:hover { -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); transform: rotateY(180deg); } .box:hover > div:first-child { opacity: 0; } .box:hover div:last-child { -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); transform: rotateY(180deg); } </style> </head> <body> <div class="box"> <div>Hello</div> <div> World </div> </div> </body> </html>
You need to login to post a comment.