Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <html>
- <head>
- <title></title>
- <style type="text/css">
- .tile {
- -webkit-transform-style: preserve-3d;
- -webkit-perspective: 1000;
- width: 250px;
- height: 250px;
- position: relative;
- -webkit-transform: scale(1.0);
- transition:all .4s ease-in-out;
- }
- .front, .back {
- position: absolute;
- -webkit-backface-visibility: hidden;
- -webkit-transition: -webkit-transform .5s ease-in;
- width: 100%;
- height: 100%;
- padding: 20px;
- font-family: Helvetica, Arial, sans-serif;
- color: #fff;
- font-weight: bold;
- box-shadow: inset 0px 0px 20px rgba(0,0,0,0.4);
- border-radius: 4px;
- }
- .back {
- -webkit-transform: rotateY(-180deg);
- background: url('http://www.inserthtml.com/goose.jpeg');
- overflow: hidden;
- }
- .front {
- background: #7f37c2;
- }
- .tile:hover {
- -webkit-transform: scale3d(1.5,1.5,1.5) translateX(0px) translateY(0px) translateZ(1000px);
- left: 108px;
- top: 53px;
- z-index: 5;
- }
- .tile:hover .back {
- -webkit-transform: rotateY(0deg);
- }
- .tile:hover .front {
- -webkit-transform: rotateY(180deg);
- }
- </style>
- </head>
- <body>
- <div class="tile">
- <div class="front">Hello I am the front...</div>
- <div class="back">
- Some plain text
- <table>
- <tr><td>Test test test</td></tr>
- </table>
- </div>
- </div>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement