javascript - css3 Transform: 回転はビューを移動します

Question

現在、疑似 3D 環境でビューを移動しようとしています。それで、いくつかの div から始めて、最初の 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) ";
}