<!DOCTYPE html> <html lang="en"> <meta charset="utf-8"> <title>#inner should not be clipped</title> <style> body { margin: 0; background: red; } #perspective { perspective: 300px; perspective-origin: top left; } #inner { height: 100vh; transform-origin: top left; transform: translateZ(-300px) scale(2); z-index: 2; background: lime; border: 1px solid lime; box-sizing: border-box; } </style> <div id="perspective"> <div id="inner"></div> </div>