preserve3d-and-flattening-002.html (1108B)
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="The element is rendered at the correct position."> 9 <link rel="match" href="preserve3d-and-flattening-002-ref.html"> 10 11 <style> 12 body { 13 margin: 0; 14 } 15 div { 16 position: absolute; 17 height: 100px; 18 width: 100px; 19 top: 0; 20 left: 0; 21 } 22 .outer, .sibling { 23 transform-style: preserve-3d; 24 } 25 .outer { 26 background: gray; 27 } 28 .flattener { 29 background: fuchsia; 30 } 31 .sibling { 32 background: blue; 33 transform: translate3d(25px, 50px, -20px); 34 } 35 .child { 36 background: silver; 37 transform: translate3d(50px, 0, 10px); 38 } 39 </style> 40 41 <div class="outer"> 42 <div class="flattener"> 43 <div class="child"></div> 44 </div> 45 <div class="sibling"></div> 46 </div>