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的值。

旋转图像，然后使用js按钮进行平移

1 个答案: