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