变换:旋转移动视图

css3 Transform: rotate moves the view

本文关键字:视图 移动 旋转 变换      更新时间:2023-09-26

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

但是现在当我旋转时,视图不仅旋转,而且移动。这使得你很难计算出你在3D现实中的位置。

你知道怎么解决这个问题吗

这是一把小提琴:

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

,下面是我如何给div添加转换:

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

可能是变换的顺序

尝试先旋转:

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