<!DOCTYPE HTML> <style> body { transform: translateZ(0); } #overlapper { width: 400px; height: 400px; left: 200px; background: gray; position: absolute; transform: translateZ(0); } #container { -webkit-perspective: 1400px; transform: translateZ(0); position: absolute; width: 180px; height: 180px; background: papayawhip; } #composited { width: 100px; height: 100px; background: green; position: absolute; transform: translateZ(10px); } #squashed { position: absolute; left: 200px; width: 50px; height: 50px; background: blue; } </style> <div id="overlapper"></div> <div id="container"> <div id="composited"></div> </div> <div id="squashed"></div>