css3 Transform: rotate moves the view

Question

I am currently trying to move the view in a pseudo 3D environment. So I started with some divs and even got a first - lets call it room.

But now when I rotate, the view not only rotates, but also moves. that makes it pretty hard to calculate at which position in the 3D real you are.

Any idea how to solve this.

Here is a fiddle:

http://jsfiddle.net/torsten/HHQCg/

and here is how I add the transformation to the div:

document.getElementById('world').style.webkitTransform = "translate3d(0px, 0px, 0px) rotateY(45deg)";

Answer 1

Perhaps it's the order of the transforms.

Try rotating first:

function updateMap() {
    //alert(mapPos.rotate);
    document.getElementById('world').style.webkitTransform = "rotateY(" + mapPos.rotate + "deg) translate3d(" + mapPos.x +"px, " + mapPos.y + "px, " + mapPos.z + "px) ";
}