|
1 <!DOCTYPE HTML> |
|
2 <title>Testcase for outline around 3-D transform</title> |
|
3 <style> |
|
4 |
|
5 html, body { margin: 0; padding: 0; border: none } |
|
6 |
|
7 div { |
|
8 width: 100px; |
|
9 height: 100px; |
|
10 } |
|
11 |
|
12 body > div { |
|
13 margin-top: 200px; |
|
14 margin-left: 200px; |
|
15 transform-style: flat; |
|
16 outline: 2px dashed blue; |
|
17 } |
|
18 |
|
19 body > div > div { |
|
20 transform: rotateX(90deg); |
|
21 transform-origin: 50% 50%; |
|
22 transform-style: preserve-3d; |
|
23 } |
|
24 |
|
25 body > div > div > div { |
|
26 transform: rotateX(-30deg); |
|
27 transform-origin: 50% 50%; |
|
28 transform-style: preserve-3d; |
|
29 } |
|
30 |
|
31 body > div > div > div > div { |
|
32 transform: scale(1.5, 3); |
|
33 transform-origin: 50% 50%; |
|
34 background: rgba(255, 255, 0, 0.4); |
|
35 } |
|
36 |
|
37 |
|
38 </style> |
|
39 |
|
40 <div><div><div><div></div></div></div></div> |