0

画像を回転させて翻訳することはできますが、回転した画像を翻訳する必要があります。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)";
}
4

1 に答える 1

0

関数MoveUp()は回転変換をオーバーライドします。複数の変換を連鎖させるには、次のことを行う必要があります (style.transform簡潔にするためにのみ表示されます)。

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

したがって、基本的には、すべての変換を 1 つの文字列に連結し、それを の値として設定しますstyle.transform。

于 2013-01-08T23:20:29.743 に答える