css3变换：旋转移动视图

我目前正试图在伪3D环境中移动视图。所以我从一些div开始，甚至第一次 - 让我们称它为空间。css3变换：旋转移动视图

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

任何想法如何解决这个问题。

这里是一个小提琴：

，这里是我如何转型添加到div：

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

来源

2013-05-13 Dinkheller

也许它是变换的顺序。

尝试第一旋转：

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

来源

2013-05-13 21:49:02

不应该的问题，因为这两个计算，并在同一时间使用。但无论如何我测试了它。没有 – Dinkheller 2013-05-14 06:42:57

这很奇怪。当我在Chrome中测试它时，在改变顺序后，它的行为有所不同。 – 2013-05-14 12:56:12

是的，它很重要，很多。如果你不知道这一点，你会遇到很多问题。我建议你快速搜索“矩阵产品不可交换”，这个问题在这里解释太长。 @SteveWellens正确地回答你。 – vals 2013-05-14 17:07:05

css3变换：旋转移动视图

回答

相关问题