|
1 <!DOCTYPE html> |
|
2 <html xmlns="http://www.w3.org/1999/xhtml"> |
|
3 <style type="text/css"> |
|
4 |
|
5 .parentWithPerspective { |
|
6 -moz-perspective: 100px; |
|
7 -moz-perspective-origin: 150px 150px; |
|
8 -webkit-perspective: 100px; |
|
9 -webkit-perspective-origin: 150px 150px; |
|
10 /* Changing width/height to 500px should not change the rendering. */ |
|
11 height:500px; |
|
12 } |
|
13 |
|
14 .parentWithPerspective > div { |
|
15 position:absolute; |
|
16 top:100px; |
|
17 left:100px; |
|
18 width:100px; |
|
19 height:100px; |
|
20 } |
|
21 |
|
22 .notTransformed { |
|
23 outline: 1px solid black; |
|
24 } |
|
25 |
|
26 .transformed { |
|
27 background:blue; |
|
28 -moz-transform-origin: 0% 0%; |
|
29 -moz-transform: rotateY(45deg); |
|
30 -webkit-transform-origin: 0% 0%; |
|
31 -webkit-transform: rotateY(45deg); |
|
32 } |
|
33 |
|
34 </style> |
|
35 <body> |
|
36 <div class="parentWithPerspective"> |
|
37 <div class="notTransformed"></div> |
|
38 <div class="transformed"></div> |
|
39 </div> |
|
40 </body> |
|
41 </html> |