| OLD | NEW |
| 1 The green box appear angled out from the yellow box and embedded in it. | 1 The green box appear angled out from the yellow box and embedded in it. |
| 2 | 2 |
| 3 transform: translateZ(-100px) rotateY(45deg); | 3 transform: translateZ(-100px) rotateY(45deg); |
| 4 { | 4 { |
| 5 "name": "Content Root Layer", | 5 "layers": [ |
| 6 "bounds": [800, 600], | |
| 7 "children": [ | |
| 8 { | 6 { |
| 9 "name": "LayoutView #document", | 7 "name": "LayoutView #document", |
| 10 "bounds": [800, 600], | 8 "bounds": [800, 600], |
| 11 "contentsOpaque": true, | 9 "contentsOpaque": true, |
| 10 "drawsContent": true |
| 11 }, |
| 12 { |
| 13 "name": "LayoutBlockFlow (relative positioned) DIV id='container'", |
| 14 "position": [108, 73], |
| 15 "bounds": [304, 304], |
| 16 "drawsContent": true |
| 17 }, |
| 18 { |
| 19 "name": "Child Transform Layer", |
| 20 "bounds": [304, 304], |
| 21 "shouldFlattenTransform": false, |
| 22 "transform": [ |
| 23 [1, 0, 0, 0], |
| 24 [0, 1, 0, 0], |
| 25 [0, 0, 1, -0.002], |
| 26 [0, 0, 0, 1] |
| 27 ] |
| 28 }, |
| 29 { |
| 30 "name": "LayoutBlockFlow DIV id='parent'", |
| 31 "position": [12, 12], |
| 32 "bounds": [280, 280], |
| 33 "contentsOpaque": true, |
| 34 "shouldFlattenTransform": false, |
| 35 "3dRenderingContext": 1, |
| 12 "drawsContent": true, | 36 "drawsContent": true, |
| 13 "children": [ | 37 "backgroundColor": "#FFFF00", |
| 14 { | 38 "transform": [ |
| 15 "name": "LayoutBlockFlow (relative positioned) DIV id='container'", | 39 [0.766044443118978, -0.556670399226419, -0.32139380484327, 0], |
| 16 "position": [108, 73], | 40 [0, 0.5, -0.866025403784439, 0], |
| 17 "bounds": [304, 304], | 41 [0.642787609686539, 0.663413948168938, 0.383022221559489, 0], |
| 18 "drawsContent": true, | 42 [0, 0, 0, 1] |
| 19 "children": [ | 43 ] |
| 20 { | 44 }, |
| 21 "name": "Child Transform Layer", | 45 { |
| 22 "bounds": [304, 304], | 46 "name": "LayoutBlockFlow (positioned) DIV", |
| 23 "shouldFlattenTransform": false, | 47 "position": [40, 40], |
| 24 "transform": [ | 48 "bounds": [200, 200], |
| 25 [1, 0, 0, 0], | 49 "opacity": 0.699999988079071, |
| 26 [0, 1, 0, 0], | 50 "contentsOpaque": true, |
| 27 [0, 0, 1, -0.002], | 51 "3dRenderingContext": 1, |
| 28 [0, 0, 0, 1] | 52 "drawsContent": true, |
| 29 ], | 53 "backgroundColor": "#008000", |
| 30 "children": [ | 54 "transform": [ |
| 31 { | 55 [0.766044443118978, 0, 0.642787609686539, 0], |
| 32 "name": "LayoutBlockFlow DIV id='parent'", | 56 [0, 1, 0, 0], |
| 33 "position": [12, 12], | 57 [-0.642787609686539, 0, 0.766044443118978, 0], |
| 34 "bounds": [280, 280], | 58 [0, 0, 50, 1] |
| 35 "contentsOpaque": true, | |
| 36 "shouldFlattenTransform": false, | |
| 37 "3dRenderingContext": 1, | |
| 38 "drawsContent": true, | |
| 39 "backgroundColor": "#FFFF00", | |
| 40 "transform": [ | |
| 41 [0.766044443118978, -0.556670399226419, -0.32139380484327, 0
], | |
| 42 [0, 0.5, -0.866025403784439, 0], | |
| 43 [0.642787609686539, 0.663413948168938, 0.383022221559489, 0]
, | |
| 44 [0, 0, 0, 1] | |
| 45 ], | |
| 46 "children": [ | |
| 47 { | |
| 48 "name": "LayoutBlockFlow (positioned) DIV", | |
| 49 "position": [40, 40], | |
| 50 "bounds": [200, 200], | |
| 51 "opacity": 0.699999988079071, | |
| 52 "contentsOpaque": true, | |
| 53 "3dRenderingContext": 1, | |
| 54 "drawsContent": true, | |
| 55 "backgroundColor": "#008000", | |
| 56 "transform": [ | |
| 57 [0.766044443118978, 0, 0.642787609686539, 0], | |
| 58 [0, 1, 0, 0], | |
| 59 [-0.642787609686539, 0, 0.766044443118978, 0], | |
| 60 [0, 0, 50, 1] | |
| 61 ] | |
| 62 } | |
| 63 ] | |
| 64 } | |
| 65 ] | |
| 66 } | |
| 67 ] | |
| 68 } | |
| 69 ] | 59 ] |
| 70 } | 60 } |
| 71 ] | 61 ] |
| 72 } | 62 } |
| 73 | 63 |
| OLD | NEW |