# 平行移動・回転して主人公の描画

この左画面を左クリックすれば以下の赤字のスクリプト全部がクリップボードにコピーされるので、右の画面の赤い矢印の右側に貼り付けてください。

    	function draw(selector,pos,angle)
    	{
    		var value = 'translate('+pos[0]+'px,'+pos[1]+'px) rotate('+angle+'deg)';
    		css = {
                "-webkit-transform": value,
                "-moz-transform": value,
                "-ms-transform": value,
                "-o-transform": value,
                "transform": value};
    		$(selector).show().css(css);
    		$(selector+'2').hide();
    	}

では「制御」→「実行」メニューを実行してください。
主人公が_posの位置で、_angleの角度で回転して描画されました。
translate(Xピクセル,Yピクセル)で平行移動し、rotate(角度deg)で回転し、valueに代入しました。
css変数に、"-webkit-transform": valueや"-moz-transform": valueなど各ブラウザ向けにvalueをセットしました。
セレクタ引数にcssをセットしました。
セレクタ2を隠しました。

### 次へ