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 <!-- | 19 <!-- |
20 The red div should be covered by the green. If the red is showing, there is | 20 The red div should be covered by the green. If the red is showing, there is |
21 an issue with the anchor point. | 21 an issue with the anchor point. |
22 --> | 22 --> |
23 <div class="transformableContainer transformable" style="width: 400px; height: 4
00px;"> | 23 <div class="transformableContainer transformable" style="width: 400px; height: 4
00px;"> |
24 <div class="transformable transformed"> | 24 <div class="transformable transformed"> |
25 <div class="content" style="width: 200px; height: 200px; background-color: r
ed;"></div> | 25 <div class="content" style="width: 200px; height: 200px; background-color: r
ed;"></div> |
26 </div> | 26 </div> |
27 </div> | 27 </div> |
28 | 28 |
29 <div class="transformableContainer resetTransformOrigin" style="width: 400px; he
ight: 400px;"> | 29 <div class="transformableContainer resetTransformOrigin" style="width: 400px; he
ight: 400px;"> |
30 <div class="transformable transformed"> | 30 <div class="transformable transformed"> |
31 <div class="content" style="width: 200px; height: 200px; background-color: g
reen;"></div> | 31 <div class="content" style="width: 200px; height: 200px; background-color: g
reen;"></div> |
32 </div> | 32 </div> |
33 </div> | 33 </div> |
OLD | NEW |