「JavaScript」rotate()で画像を回転させる
書式
var e = document.getElementById(画像ID);
e.style.transform = “rotate(角度)";
関数
rotate() は CSS の関数で、要素を二次元平面上の特定の点を中心に、形を崩さずに回転させる変形を定義します。
rotate() で生成される回転の量は、 <angle> で指定します。
正の数であれば、移動は時計回りです。負の数であれば、反時計回りになります。
180 度で回転したものは点対称と呼ばれます。
サンプルコード
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>rotate()で画像を回転させるサンプル</title> <script> var cft = 0; function funA(k){ var e = document.getElementById("logo"); cft = cft + k; e.style.transform = "rotate(" + cft + "deg)"; } </script> </head> <body> <img id="logo" src="img/user.png" /><br> <p><input type="button" value="検証1" onclick="funA(90);"></p> <p><input type="button" value="検証2" onclick="funA(180);"></p> <p><input type="button" value="検証3" onclick="funA(-90);"></p> </body> </html>
結果
「検証1」ボタンを押すと、画像が右へ90度回転します。 「検証2」ボタンを押すと、画像が180度回転します。 「検証3」ボタンを押すと、画像が左へ90度回転します。