perspective-scrolling-4-ref.html (603B)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <meta charset="utf-8"> 4 <title>Reference: Perspective scrolling with nested clips</title> 5 6 <style> 7 8 html { 9 padding: 50px 0 3000px; 10 } 11 12 body { 13 margin: 0; 14 } 15 16 .scrollbox { 17 width: 600px; 18 height: 500px; 19 perspective: 1px; 20 overflow: auto; 21 } 22 23 .transformed { 24 will-change: transform; 25 width: 200px; 26 height: 200px; 27 margin: 200px 100px; 28 border: 10px solid black; 29 } 30 31 .spacer { 32 height: 4000px; 33 } 34 35 </style> 36 37 <div class="scrollbox"> 38 <div class="transformed"></div> 39 <div class="spacer"></div> 40 </div> 41 42 <script> 43 document.documentElement.scrollTop = 250; 44 </script>