preserve3d-button-ref.html (765B)
1 <!doctype html> 2 <title>CSS Test Reference</title> 3 <link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> 4 <link rel="author" title="Mozilla" href="https://mozilla.org"> 5 <style> 6 .scene { 7 width: 200px; 8 height: 200px; 9 perspective: 5000px; 10 } 11 12 .card { 13 width: 100%; 14 height: 100%; 15 transform-style: preserve-3d; 16 position: relative; 17 background: none; 18 border: 0; 19 padding: 0; 20 transform: rotateY(180deg); 21 } 22 23 .face { 24 position: absolute; 25 top: 0; 26 width: 100%; 27 height: 100%; 28 backface-visibility: hidden; 29 background: red; 30 } 31 32 .backface { 33 background: green; 34 transform: rotateY(180deg); 35 } 36 </style> 37 <div class="scene"> 38 <div class="card"> 39 <div class="face"></div> 40 <div class="face backface"></div> 41 </div> 42 </div>