| <!DOCTYPE HTML> |
| <style> |
| .transformableContainer { |
| position: absolute; |
| -webkit-perspective-origin: 50% 50%; |
| -webkit-perspective: 100; |
| } |
| .transformable { |
| -webkit-transform-origin: 0em 0em 0em; |
| -webkit-transform-style: preserve-3d; |
| } |
| .transformed { |
| transform: translate3d(100px, 100px, -25px); |
| } |
| .resetTransformOrigin { |
| -webkit-transform-origin: 50% 50% !important; |
| } |
| </style> |
| <!-- |
| The red div should be covered by the green. If the red is showing, there is |
| an issue with the anchor point. |
| --> |
| <div class="transformableContainer transformable" style="width: 400px; height: 400px;"> |
| <div class="transformable transformed"> |
| <div class="content" style="width: 200px; height: 200px; background-color: red;"></div> |
| </div> |
| </div> |
| |
| <div class="transformableContainer resetTransformOrigin" style="width: 400px; height: 400px;"> |
| <div class="transformable transformed"> |
| <div class="content" style="width: 200px; height: 200px; background-color: green;"></div> |
| </div> |
| </div> |
