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 overflow: hidden; | 7 overflow: hidden; |
8 } | 8 } |
9 .transformable { | 9 .transformable { |
10 -webkit-transform-origin: 0em 0em 0em; | 10 -webkit-transform-origin: 0em 0em 0em; |
11 -webkit-transform-style: preserve-3d; | 11 -webkit-transform-style: preserve-3d; |
12 } | 12 } |
13 .transformed { | 13 .transformed { |
14 -webkit-transform: translate3d(100px, 100px, -25px); | 14 transform: translate3d(100px, 100px, -25px); |
15 } | 15 } |
16 .resetTransformOrigin { | 16 .resetTransformOrigin { |
17 -webkit-transform-origin: 50% 50% !important; | 17 -webkit-transform-origin: 50% 50% !important; |
18 } | 18 } |
19 </style> | 19 </style> |
20 <!-- | 20 <!-- |
21 The red div should be covered by the green. If the red is showing, there is | 21 The red div should be covered by the green. If the red is showing, there is |
22 an issue with the anchor point. | 22 an issue with the anchor point. |
23 --> | 23 --> |
24 <div class="transformableContainer transformable" style="width: 400px; height: 4
00px;"> | 24 <div class="transformableContainer transformable" style="width: 400px; height: 4
00px;"> |
25 <div class="transformable transformed"> | 25 <div class="transformable transformed"> |
26 <div class="content" style="width: 200px; height: 200px; background-color: r
ed;"></div> | 26 <div class="content" style="width: 200px; height: 200px; background-color: r
ed;"></div> |
27 </div> | 27 </div> |
28 </div> | 28 </div> |
29 | 29 |
30 <div class="transformableContainer resetTransformOrigin" style="width: 400px; he
ight: 400px;"> | 30 <div class="transformableContainer resetTransformOrigin" style="width: 400px; he
ight: 400px;"> |
31 <div class="transformable transformed"> | 31 <div class="transformable transformed"> |
32 <div class="content" style="width: 200px; height: 200px; background-color: g
reen;"></div> | 32 <div class="content" style="width: 200px; height: 200px; background-color: g
reen;"></div> |
33 </div> | 33 </div> |
34 </div> | 34 </div> |
OLD | NEW |