perspective-split-by-zero-w.html (1096B)
1 <!DOCTYPE html> 2 <title>CSS Test (Transforms): Filter on an element in a preserve-3d scene</title> 3 <link rel="author" title="L. David Baron" href="https://dbaron.org/"> 4 <link rel="author" title="Google" href="http://www.google.com/"> 5 <link rel="help" href="https://drafts.csswg.org/css-transforms-2/#processing-of-perspective-transformed-boxes"> 6 <meta name="assert" content="A box that perspective causes to have parts with w<0 still has the w>0 parts rendered correctly. (Chromium issue 1202695)"> 7 <link rel="match" href="perspective-split-by-zero-w-ref.html"> 8 9 <style> 10 html, body { 11 margin: 0; 12 padding: 0; 13 height: 100%; 14 width: 100%; 15 } 16 html { overflow: hidden } 17 body { 18 perspective: 500px; 19 perspective-origin: 400px 299px; 20 background: rgb(200, 200, 200); 21 } 22 div { 23 width: 1140px; 24 height: 990px; 25 transform-style: preserve-3d; 26 position: absolute; 27 top: 299.5px; 28 left: 400px; 29 transform: translate3d(-570px, -495px, 500px) rotateY(64.24deg) translateY(23px) rotateX(90deg); 30 background-image: url('support/tile-bg.png'); 31 background-size: 100% 100%; 32 } 33 </style> 34 35 <div></div>