The green box appear angled out from the yellow box and embedded in it. transform: translateZ(-100px) rotateY(45deg); { "bounds": [800, 600], "children": [ { "bounds": [800, 600], "contentsOpaque": true, "drawsContent": true, "children": [ { "position": [108, 72], "bounds": [304, 304], "drawsContent": true, "children": [ { "bounds": [304, 304], "shouldFlattenTransform": false, "transform": [ [1, 0, 0, 0], [0, 1, 0, 0], [0, 0, 1, -0.002], [0, 0, 0, 1] ], "children": [ { "position": [12, 12], "bounds": [280, 280], "opacity": 0.800000011920929, "contentsOpaque": true, "shouldFlattenTransform": false, "3dRenderingContext": 1, "drawsContent": true, "backgroundColor": "#FFFF00", "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] ], "children": [ { "position": [40, 40], "bounds": [200, 200], "opacity": 0.699999988079071, "contentsOpaque": true, "3dRenderingContext": 1, "drawsContent": true, "backgroundColor": "#008000", "transform": [ [0.766044443118978, 0, 0.642787609686539, 0], [0, 1, 0, 0], [-0.642787609686539, 0, 0.766044443118978, 0], [0, 0, 50, 1] ] } ] } ] } ] } ] } ] }