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