perspective-scrolling-3.html (749B)
1 <!DOCTYPE html> 2 <html lang="en" reftest-async-scroll> 3 <meta charset="utf-8"> 4 <title>Perspective in scrolled state</title> 5 6 <style> 7 8 html { 9 height: 100%; 10 overflow: hidden; 11 } 12 13 body { 14 margin: 0; 15 height: 100%; 16 perspective: 1px; 17 perspective-origin: top left; 18 overflow: auto; 19 } 20 21 .transformed { 22 transform: translateZ(-1px) scale(2); 23 transform-origin: -100px -200px; 24 margin: 200px 100px; 25 width: 200px; 26 height: 200px; 27 border: 10px solid black; 28 } 29 30 .spacer { 31 height: 4000px; 32 } 33 34 </style> 35 36 <body reftest-displayport-x="0" reftest-displayport-y="0" 37 reftest-displayport-w="800" reftest-displayport-h="2000" 38 reftest-async-scroll-x="0" reftest-async-scroll-y="200"> 39 40 <div class="transformed"></div> 41 <div class="spacer"></div>