css3变换：旋转移动视图

Question

我目前正在尝试在伪3D环境中移动视图。 所以我从一些div开始，甚至得到了第一个 - 让我们称之为房间。

但是现在当我旋转时，视图不仅会旋转，还会移动。 这使得很难计算出3D真实中的哪个位置。

知道如何解决这个问题。

这是一个小提琴：

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

以下是我如何将转换添加到div：

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

Answer 1

也许这是变换的顺序。

先尝试旋转：

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