<!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>
<div class="transformableContainer resetTransformOrigin" 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>