javascript - 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) ";
}