perspective-scrolling-5.html (1075B)
1 <!DOCTYPE html> 2 <html lang="en" reftest-async-scroll> 3 <meta charset="utf-8"> 4 <title>Perspective scrolling</title> 5 <style> 6 html { 7 height: 100%; 8 overflow: hidden; 9 } 10 11 body { 12 overflow: auto; 13 height: 100%; 14 scrollbar-width: none; 15 margin: 0; 16 } 17 18 .scene { 19 position: relative; 20 width: 200px; 21 height: 200px; 22 perspective: 100px; 23 transform-style: preserve-3d; 24 } 25 26 .face { 27 position: absolute; 28 width: 200px; 29 height: 200px; 30 top: 0; 31 left: 0; 32 } 33 34 .front { 35 background-color: lime; 36 } 37 38 /* 39 * This one should never be visible, and should be always 40 * behind the front face. 41 */ 42 .back { 43 width: 400px; 44 height: 400px; 45 top: -100px; 46 left: -100px; 47 transform: translateZ(-100px); 48 background-color: red; 49 } 50 </style> 51 52 <body reftest-displayport-x="0" reftest-displayport-y="0" 53 reftest-displayport-w="800" reftest-displayport-h="2000" 54 reftest-async-scroll-x="0" reftest-async-scroll-y="200"> 55 <div style="height: 200px"></div> 56 <div class="scene"> 57 <div class="face front"></div> 58 <div class="face back"></div> 59 </div> 60 <div style="height: 5000px"></div>