The green box appear angled out from the yellow box and embedded in it. transform: translateZ(-100px) rotateY(45deg); { "layers": [ { "name": "Scrolling background of LayoutView #document", "bounds": [800, 600], "contentsOpaque": true, "backgroundColor": "#FFFFFF" }, { "name": "LayoutBlockFlow (relative positioned) DIV id='container'", "bounds": [304, 304], "transform": 1 }, { "name": "LayoutBlockFlow (children-inline) DIV id='parent'", "bounds": [280, 280], "contentsOpaque": true, "backgroundColor": "#FFFF00", "transform": 4 }, { "name": "LayoutBlockFlow (positioned, children-inline) DIV", "bounds": [200, 200], "contentsOpaque": true, "backgroundColor": "#008000", "transform": 6 } ], "transforms": [ { "id": 1, "transform": [ [1, 0, 0, 0], [0, 1, 0, 0], [0, 0, 1, 0], [108, 73, 0, 1] ] }, { "id": 2, "parent": 1, "transform": [ [1, 0, 0, 0], [0, 1, 0, 0], [0, 0, 1, -0.002], [0, 0, 0, 1] ], "origin": [152, 152] }, { "id": 3, "parent": 2, "transform": [ [1, 0, 0, 0], [0, 1, 0, 0], [0, 0, 1, 0], [12, 12, 0, 1] ], "flattenInheritedTransform": false }, { "id": 4, "parent": 3, "transform": [ [0.766044443118978, -0.556670399226419, -0.32139380484327, 0], [0, 0.5, -0.866025403784439, 0], [0.642787609686539, 0.663413948168938, 0.383022221559489, 0], [0, 0, 0, 1] ], "origin": [140, 140], "flattenInheritedTransform": false, "renderingContext": 1 }, { "id": 5, "parent": 4, "transform": [ [1, 0, 0, 0], [0, 1, 0, 0], [0, 0, 1, 0], [40, 40, 0, 1] ], "flattenInheritedTransform": false, "renderingContext": 1 }, { "id": 6, "parent": 5, "transform": [ [0.766044443118978, 0, 0.642787609686539, 0], [0, 1, 0, 0], [-0.642787609686539, 0, 0.766044443118978, 0], [0, 0, 50, 1] ], "origin": [100, 100], "flattenInheritedTransform": false, "renderingContext": 1 } ] }