「JavaScript」rotate()で画像を回転させる

2022年2月14日

書式
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度回転します。

JavaScript

Posted by arkgame

関連記事: