OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 | 2 |
3 <html> | 3 <html> |
4 <head> | 4 <head> |
5 <style> | 5 <style> |
6 #container, #container2 { | 6 #container, #container2 { |
7 height: 100px; | 7 height: 100px; |
8 width: 100px; | 8 width: 100px; |
9 margin: 10px 0; | 9 margin: 10px 0; |
10 -webkit-perspective: 1000px; | 10 -webkit-perspective: 1000px; |
11 } | 11 } |
12 | 12 |
13 #container.transformed, #container2.transformed { | 13 #container.transformed, #container2.transformed { |
14 -webkit-transform: translateX(0); | 14 transform: translateX(0); |
15 } | 15 } |
16 | 16 |
17 .box { | 17 .box { |
18 margin-bottom: 5px; | 18 margin-bottom: 5px; |
19 height: 100px; | 19 height: 100px; |
20 width: 100px; | 20 width: 100px; |
21 background-color: green; | 21 background-color: green; |
22 opacity: 0.5; | 22 opacity: 0.5; |
23 } | 23 } |
24 </style> | 24 </style> |
(...skipping 18 matching lines...) Expand all Loading... |
43 <div class="box"> | 43 <div class="box"> |
44 </div> | 44 </div> |
45 </div> | 45 </div> |
46 | 46 |
47 <div id="container2" class="transformed"> | 47 <div id="container2" class="transformed"> |
48 <div class="box"> | 48 <div class="box"> |
49 </div> | 49 </div> |
50 </div> | 50 </div> |
51 </body> | 51 </body> |
52 </html> | 52 </html> |
OLD | NEW |