preserve3d-button.html (916B)
1 <!doctype html> 2 <title>CSS Test: preserve-3d on buttons</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 <link rel="match" href="preserve3d-button-ref.html"> 6 <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1491864"> 7 <style> 8 .scene { 9 width: 200px; 10 height: 200px; 11 perspective: 5000px; 12 } 13 14 .card { 15 width: 100%; 16 height: 100%; 17 transform-style: preserve-3d; 18 position: relative; 19 background: none; 20 border: 0; 21 padding: 0; 22 transform: rotateY(180deg); 23 } 24 25 .face { 26 position: absolute; 27 top: 0; 28 width: 100%; 29 height: 100%; 30 backface-visibility: hidden; 31 background: red; 32 } 33 34 .backface { 35 background: green; 36 transform: rotateY(180deg); 37 } 38 </style> 39 <div class="scene"> 40 <button class="card"> 41 <div class="face"></div> 42 <div class="face backface"></div> 43 </button> 44 </div>