可在X和Y軸上進行轉換的Javascript（CSS 3D）

Question

我正在使用補間在X和Y軸上旋轉。 但我似乎找不到正確的JavaScript來編輯CSS。

Target是一個div，使用以下代碼，它僅在忽略Y軸的同時旋轉軸。

它使用Tween JS

function update() {

    target.style.left = position.x + 'px';
    target.style.top = position.y + 'px';
    target.style.webkitTransform = 'rotateY(' + Math.floor(position.rotation) + 'deg)';
    target.style.MozTransform = 'rotateY(' + Math.floor(position.rotation) + 'deg)';
    target.style.webkitTransform = 'rotateX(' + Math.floor(position.rotation) + 'deg)';
    target.style.MozTransform = 'rotateY(' + Math.floor(position.rotation) + 'deg)';

}

如何告訴javascript在兩個軸上旋轉而不僅僅是在一個軸上旋轉？

Answer 1

您用空格分隔參數。 例如：

target.style.webkitTransform = 'rotateX(' + Math.floor(rotationX) + 'deg) rotateY(' + Math.floor(rotationY) + 'deg)';

（如果兩次更改同一屬性，則只會覆蓋以前的值。）