preserve3d-and-flattening-003.html (1136B)
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 transform: translateX(0); 31 } 32 .sibling { 33 background: blue; 34 transform: translate3d(25px, 50px, -20px); 35 } 36 .child { 37 background: silver; 38 transform: translate3d(50px, 0, 10px); 39 } 40 </style> 41 42 <div class="outer"> 43 <div class="flattener"> 44 <div class="child"></div> 45 </div> 46 <div class="sibling"></div> 47 </div>