preserve3d-and-flattening-z-order-007.html (1369B)
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="preserve3d-and-flattening-002-ref.html"> 10 11 <style> 12 body { 13 margin: 0; 14 } 15 div, span { 16 height: 100px; 17 width: 100px; 18 background: red; 19 } 20 span { 21 display: inline-block; 22 vertical-align: top; 23 } 24 div:not(:first-child):not(.outer) { 25 /* put everything at the same position without using absolute positioning */ 26 margin-top: -100px; 27 } 28 .outer, .sibling { 29 transform-style: preserve-3d; 30 } 31 .outer { 32 background: gray; 33 } 34 .flattener { 35 /* adding position:relative or a transform changes things */ 36 background: fuchsia; 37 } 38 .sibling { 39 background: blue; 40 transform: translate3d(25px, 50px, -20px); 41 } 42 .child { 43 background: silver; 44 transform: translate3d(50px, 0, 10px); 45 will-change: transform; 46 } 47 </style> 48 49 <div class="outer"> 50 <div class="flattener"> 51 <div class="child"></div> 52 </div> 53 <div class="sibling"></div> 54 </div>