preserve3d-overflow-percent.html (1366B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>Overflow with preserve-3d and percentage-transformed parent is computed using the right reference box</title> 4 <link rel="author" title="Mozilla" href="https://mozilla.org"> 5 <link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> 6 <link rel="help" href="https://drafts.csswg.org/css-transforms-2/#transform-style-property"> 7 <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1626840"> 8 <link rel="mismatch" href="/common/blank.html"> 9 <style> 10 :root { 11 overflow: hidden; 12 } 13 body { 14 margin: 0; 15 font-size: 28px; 16 } 17 #map { 18 width: 100%; 19 height: 100%; 20 backface-visibility: hidden; 21 } 22 .floor { 23 width: 100%; 24 height: 100vh; 25 } 26 .skew { 27 height: 20em; 28 width: 20em; 29 position: relative; 30 left: 50%; 31 top: calc(50% + 1.5em); 32 transform-origin: 0% 0%; 33 transform: rotateX(45deg) rotateZ(-45deg) translateX(-50%) translateY(-50%); 34 transform-style: preserve-3d; 35 } 36 .cylinder { 37 position: absolute; 38 background-color: green; 39 transform-style: preserve-3d; 40 width: 7em; 41 height: 7em; 42 transform: translateZ(1em); 43 } 44 </style> 45 <div id="map"> 46 <div class="floor"> 47 <div class="skew" style="width: 13em; height: 47em; left: calc(50% + 0em); top: calc(50% + 0.5em);"> 48 <div class="cylinder" style="left: calc(1.5em + 0em); top: calc(38em + 0em);"></div> 49 </div> 50 </div> 51 </div>