OLD | NEW |
1 <!DOCTYPE HTML> | 1 <!DOCTYPE HTML> |
2 <style> | 2 <style> |
3 .transformableContainer { | 3 .transformableContainer { |
4 position: absolute; | 4 position: absolute; |
5 -webkit-perspective-origin: 50% 50%; | 5 -webkit-perspective-origin: 50% 50%; |
6 -webkit-perspective: 100; | 6 -webkit-perspective: 100; |
7 } | 7 } |
8 .transformable { | 8 .transformable { |
9 -webkit-transform-origin: 0em 0em 0em; | 9 -webkit-transform-origin: 0em 0em 0em; |
10 -webkit-transform-style: preserve-3d; | 10 -webkit-transform-style: preserve-3d; |
11 } | 11 } |
12 .transformed { | 12 .transformed { |
13 -webkit-transform: translate3d(100px, 100px, -25px); | 13 transform: translate3d(100px, 100px, -25px); |
14 } | 14 } |
15 .resetTransformOrigin { | 15 .resetTransformOrigin { |
16 -webkit-transform-origin: 50% 50% !important; | 16 -webkit-transform-origin: 50% 50% !important; |
17 } | 17 } |
18 </style> | 18 </style> |
19 <div class="transformableContainer resetTransformOrigin" style="width: 400px; he
ight: 400px;"> | 19 <div class="transformableContainer resetTransformOrigin" style="width: 400px; he
ight: 400px;"> |
20 <div class="transformable transformed"> | 20 <div class="transformable transformed"> |
21 <div class="content" style="width: 200px; height: 200px; background-color: r
ed;"></div> | 21 <div class="content" style="width: 200px; height: 200px; background-color: r
ed;"></div> |
22 </div> | 22 </div> |
23 </div> | 23 </div> |
24 | 24 |
25 <div class="transformableContainer resetTransformOrigin" style="width: 400px; he
ight: 400px;"> | 25 <div class="transformableContainer resetTransformOrigin" style="width: 400px; he
ight: 400px;"> |
26 <div class="transformable transformed"> | 26 <div class="transformable transformed"> |
27 <div class="content" style="width: 200px; height: 200px; background-color: g
reen;"></div> | 27 <div class="content" style="width: 200px; height: 200px; background-color: g
reen;"></div> |
28 </div> | 28 </div> |
29 </div> | 29 </div> |
OLD | NEW |