perspective-clipping-1.html (476B)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <meta charset="utf-8"> 4 <title>#inner should not be clipped</title> 5 6 <style> 7 8 body { 9 margin: 0; 10 background: red; 11 } 12 13 #perspective { 14 perspective: 300px; 15 perspective-origin: top left; 16 } 17 18 #inner { 19 height: 100vh; 20 transform-origin: top left; 21 transform: translateZ(-300px) scale(2); 22 z-index: 2; 23 background: lime; 24 border: 1px solid lime; 25 box-sizing: border-box; 26 } 27 28 </style> 29 30 <div id="perspective"> 31 <div id="inner"></div> 32 </div>