javascript - 旋转图像，然后使用 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.