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變換：旋轉移動視圖

回答

相關問題