|
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 } |
|
17 |
|
18 body > div > div { |
|
19 transform: rotateX(30deg); |
|
20 transform-origin: 50% 50%; |
|
21 transform-style: preserve-3d; |
|
22 border: 5px solid green; |
|
23 margin: -5px; |
|
24 } |
|
25 |
|
26 body > div > div > div { |
|
27 transform: rotateX(30deg); |
|
28 width: 50px; margin-left: 20px; margin-top: -5px; |
|
29 transform-origin: 50% 50%; |
|
30 transform-style: preserve-3d; |
|
31 border: 5px solid blue; |
|
32 } |
|
33 |
|
34 </style> |
|
35 |
|
36 <div><div><div></div></div></div> |