preserve3d-and-flattening-001.html (1448B)
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-001-ref.html"> 10 <meta name="fuzzy" content="maxDifference=0-127;totalPixels=0-500"> 11 12 <style> 13 body { 14 margin: 0; 15 } 16 .scene-wrapper { 17 margin-top: 100px; 18 margin-left: 50px; 19 width: 200px; 20 height: 200px; 21 perspective: 1000px; 22 perspective-origin: 0px 0px; 23 } 24 .scene-root { 25 transform: rotateX(30deg); 26 transform-origin: 0px 0px; 27 transform-style:preserve-3d; 28 /* This is in place of a transition in the original. */ 29 will-change: transform; 30 } 31 .descendent-of-flattener { 32 height: 50px; 33 will-change: transform; 34 } 35 .scene-3d-element { 36 background: blue; 37 transform: translateZ(100px); 38 width: 100px; 39 height: 100px; 40 transform-style:preserve-3d 41 } 42 </style> 43 44 <div class="scene-wrapper"> 45 <div class="scene-root"> 46 <div class="scene-flattener"> 47 <div class="descendent-of-flattener"></div> 48 </div> 49 <div class="scene-3d-element"></div> 50 </div> 51 </div>