<!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>