preserve3d-and-flattening-z-order-005.html (1287B)
1 <!DOCTYPE HTML> 2 <meta charset="utf-8"> 3 <title>CSS Test (Transforms): Flattening at the leafward edges of a preserve-3d scene</title> 4 <link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1255544"> 5 <link rel="author" title="L. David Baron" href="https://dbaron.org/"> 6 <link rel="author" title="Google" href="http://www.google.com/"> 7 <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#3d-transform-rendering"> 8 <meta name="assert" content="Elements are drawn in the correct z-order."> 9 <link rel="match" href="reference/green.html"> 10 11 <style> 12 div, span { 13 height: 100px; 14 width: 100px; 15 background: red; 16 } 17 span { 18 display: inline-block; 19 vertical-align: top; 20 } 21 div:not(:first-child):not(.outer) { 22 /* put everything at the same position without using absolute positioning */ 23 margin-top: -100px; 24 } 25 .outer, .sibling { 26 transform-style: preserve-3d; 27 } 28 .sibling { 29 transform: translateZ(-10px); 30 } 31 .child { 32 will-change: transform; 33 position: relative; 34 z-index: -1; 35 } 36 </style> 37 38 <p>Pass if there is NO red below:</p> 39 40 <div class="outer"> 41 <div class="sibling"></div> 42 <div class="flattener"><span style="background: green"></span><div class="child"></div><div></div></div> 43 <div class="flattener"><div class="child"></div><div></div></div> 44 </div>