backface-visibility-2.html (752B)
1 <!DOCTYPE html> 2 <html> 3 <body> 4 <style> 5 #container { 6 position: relative; 7 margin: 10px auto; 8 width: 450px; 9 height: 281px; 10 z-index: 1; 11 perspective: 1000px; 12 } 13 #card { 14 width: 100%; 15 height: 100%; 16 transform-style: preserve-3d; 17 transform: rotateY(165deg); 18 } 19 .face { 20 position: absolute; 21 width: 100%; 22 height: 100%; 23 backface-visibility: hidden; 24 background: red; 25 } 26 .face.back { 27 display: block; 28 transform: rotateY(180deg); 29 box-sizing: border-box; 30 padding: 10px; 31 color: white; 32 text-align: center; 33 background: green; 34 } 35 </style> 36 37 <div id="container" class="hover"> 38 <div id="card"> 39 <div class="front face"> 40 </div> 41 <div class="back face"> 42 </div> 43 </div> 44 </div> 45 </body></html>