| 1234567891011121314151617181920212223242526272829303132333435363738394041424344 |
- <!DOCTYPE html>
- <html>
- <body>
- <style>
- #container {
- position: relative;
- margin: 10px auto;
- width: 450px;
- height: 281px;
- z-index: 1;
- -moz-perspective: 1000px;
- }
- #card {
- width: 100%;
- height: 100%;
- -moz-transform-style: preserve-3d;
- -moz-transform: rotateY(165deg);
- }
- .face {
- position: absolute;
- width: 100%;
- height: 100%;
- -moz-backface-visibility: hidden;
- background: red;
- }
- .face.back {
- display: block;
- -moz-transform: rotateY(180deg);
- box-sizing: border-box;
- padding: 10px;
- color: white;
- text-align: center;
- background: green;
- }
- </style>
-
- <div id="container" class="hover">
- <div id="card">
- <div class="back face">
- </div>
- </div>
- </div>
- </body></html>
|
