| The green box appear angled out from the yellow box and embedded in it. |
| |
| transform: translateZ(-100px) rotateY(45deg); |
| { |
| "layers": [ |
| { |
| "name": "Scrolling Contents Layer", |
| "bounds": [800, 600], |
| "contentsOpaque": true, |
| "backgroundColor": "#FFFFFF" |
| }, |
| { |
| "name": "LayoutNGBlockFlow (relative positioned) DIV id='container'", |
| "bounds": [304, 304], |
| "transform": 1 |
| }, |
| { |
| "name": "LayoutNGBlockFlow DIV id='parent'", |
| "bounds": [280, 280], |
| "contentsOpaque": true, |
| "backgroundColor": "#FFFF00", |
| "transform": 4 |
| }, |
| { |
| "name": "LayoutNGBlockFlow (positioned) DIV", |
| "bounds": [200, 200], |
| "contentsOpaque": true, |
| "backgroundColor": "#008000", |
| "transform": 9 |
| } |
| ], |
| "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": 1, |
| "transform": [ |
| [1, 0, 0, 0], |
| [0, 1, 0, 0], |
| [0, 0, 1, -0.002], |
| [0, 0, 0, 1] |
| ], |
| "origin": [152, 152] |
| }, |
| { |
| "id": 6, |
| "parent": 5, |
| "transform": [ |
| [1, 0, 0, 0], |
| [0, 1, 0, 0], |
| [0, 0, 1, 0], |
| [12, 12, 0, 1] |
| ], |
| "flattenInheritedTransform": false |
| }, |
| { |
| "id": 7, |
| "parent": 6, |
| "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": 8, |
| "parent": 7, |
| "transform": [ |
| [1, 0, 0, 0], |
| [0, 1, 0, 0], |
| [0, 0, 1, 0], |
| [40, 40, 0, 1] |
| ], |
| "flattenInheritedTransform": false, |
| "renderingContext": 1 |
| }, |
| { |
| "id": 9, |
| "parent": 8, |
| "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 |
| } |
| ] |
| } |
| |