旋轉圖像，然後用js按鈕翻譯它

Question

旋轉圖片並翻譯它的作品除了我想旋轉的圖像被翻譯。當按下MoveUp按鈕時，它將向上移動未旋轉的原始圖像。

var _pic = document.getElementById("picture"); 
var _rotation = 0; 
var _MoveUp = 0; 

function RotateLeft(){ 
_rotation+= 5; 
_pic.style.webkitTransform= "rotate(" + _rotation + "deg)"; 
_pic.style.Moz-transform="rotate(" + _rotation + "deg)"; 
_pic.style.ms-transform="rotate(" + _rotation + "deg)"; 
_pic.style.transform="rotate(" + _rotation + "deg)"; 
} 

function RotateRight(){ 
_rotation-= 5; 
_pic.style.webkitTransform= "rotate(" + _rotation + "deg)"; 
_pic.style.Moz-transform="rotate(" + _rotation + "deg)"; 
_pic.style.ms-transform="rotate(" + _rotation + "deg)"; 
_pic.style.transform="rotate(" + _rotation + "deg)"; 
} 

function MoveUp(){ 
_MoveUp-= 5; 
_pic.style.webkitTransform("t100,100r45t-100,0"); 
//"translateY(" + "T" + _MoveUp + "px)"; 
_pic.style.Moz-transform="translateY(" + _MoveUp + "px)"; 
_pic.style.ms-transform="translateY(" + _MoveUp + "px)"; 
_pic.style.transform="translateY(" + _MoveUp + "px)"; 
} 

Answer 1

您的MoveUp()函數將覆蓋旋轉變換。鏈接在一起多個轉換，你應該做的（爲簡便起見只顯示style.transform）：

_pic.style.transform="translateY(" + _MoveUp + "px) rotate(" + _rotation + "deg)"; 

所以基本上您連接所有的轉換成一個字符串，並設置爲style.transform值。