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 "bounds": [800, 600], | 6 "bounds": [800, 600], |
6 "children": [ | 7 "children": [ |
7 { | 8 { |
| 9 "name": "LayoutView #document", |
8 "bounds": [800, 600], | 10 "bounds": [800, 600], |
9 "contentsOpaque": true, | 11 "contentsOpaque": true, |
10 "drawsContent": true, | 12 "drawsContent": true, |
11 "children": [ | 13 "children": [ |
12 { | 14 { |
| 15 "name": "LayoutBlockFlow (relative positioned) DIV id='container'", |
13 "position": [108, 73], | 16 "position": [108, 73], |
14 "bounds": [304, 304], | 17 "bounds": [304, 304], |
15 "drawsContent": true, | 18 "drawsContent": true, |
16 "children": [ | 19 "children": [ |
17 { | 20 { |
| 21 "name": "Child Transform Layer", |
18 "bounds": [304, 304], | 22 "bounds": [304, 304], |
19 "shouldFlattenTransform": false, | 23 "shouldFlattenTransform": false, |
20 "transform": [ | 24 "transform": [ |
21 [1, 0, 0, 0], | 25 [1, 0, 0, 0], |
22 [0, 1, 0, 0], | 26 [0, 1, 0, 0], |
23 [0, 0, 1, -0.002], | 27 [0, 0, 1, -0.002], |
24 [0, 0, 0, 1] | 28 [0, 0, 0, 1] |
25 ], | 29 ], |
26 "children": [ | 30 "children": [ |
27 { | 31 { |
| 32 "name": "LayoutBlockFlow DIV id='parent'", |
28 "position": [12, 12], | 33 "position": [12, 12], |
29 "bounds": [280, 280], | 34 "bounds": [280, 280], |
30 "opacity": 0.800000011920929, | 35 "opacity": 0.800000011920929, |
31 "contentsOpaque": true, | 36 "contentsOpaque": true, |
32 "shouldFlattenTransform": false, | 37 "shouldFlattenTransform": false, |
33 "3dRenderingContext": 1, | 38 "3dRenderingContext": 1, |
34 "drawsContent": true, | 39 "drawsContent": true, |
35 "backgroundColor": "#FFFF00", | 40 "backgroundColor": "#FFFF00", |
36 "transform": [ | 41 "transform": [ |
37 [0.766044443118978, -0.556670399226419, -0.32139380484327, 0
], | 42 [0.766044443118978, -0.556670399226419, -0.32139380484327, 0
], |
38 [0, 0.5, -0.866025403784439, 0], | 43 [0, 0.5, -0.866025403784439, 0], |
39 [0.642787609686539, 0.663413948168938, 0.383022221559489, 0]
, | 44 [0.642787609686539, 0.663413948168938, 0.383022221559489, 0]
, |
40 [0, 0, 0, 1] | 45 [0, 0, 0, 1] |
41 ], | 46 ], |
42 "children": [ | 47 "children": [ |
43 { | 48 { |
| 49 "name": "LayoutBlockFlow (positioned) DIV", |
44 "position": [40, 40], | 50 "position": [40, 40], |
45 "bounds": [200, 200], | 51 "bounds": [200, 200], |
46 "opacity": 0.699999988079071, | 52 "opacity": 0.699999988079071, |
47 "contentsOpaque": true, | 53 "contentsOpaque": true, |
48 "3dRenderingContext": 1, | 54 "3dRenderingContext": 1, |
49 "drawsContent": true, | 55 "drawsContent": true, |
50 "backgroundColor": "#008000", | 56 "backgroundColor": "#008000", |
51 "transform": [ | 57 "transform": [ |
52 [0.766044443118978, 0, 0.642787609686539, 0], | 58 [0.766044443118978, 0, 0.642787609686539, 0], |
53 [0, 1, 0, 0], | 59 [0, 1, 0, 0], |
54 [-0.642787609686539, 0, 0.766044443118978, 0], | 60 [-0.642787609686539, 0, 0.766044443118978, 0], |
55 [0, 0, 50, 1] | 61 [0, 0, 50, 1] |
56 ] | 62 ] |
57 } | 63 } |
58 ] | 64 ] |
59 } | 65 } |
60 ] | 66 ] |
61 } | 67 } |
62 ] | 68 ] |
63 } | 69 } |
64 ] | 70 ] |
65 } | 71 } |
66 ] | 72 ] |
67 } | 73 } |
68 | 74 |
OLD | NEW |