[JavaScript] 画像を回転させる

投稿日：2018年12月9日

JavaScriptを使用して画像を回転させるサンプルです。

サンプルソース

例）ボタンを押すと画像(sample.png)を回転させる

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>画像を回転させるサンプル</title>
<script>
var d = 0;
function kaiten(x){
  var e = document.getElementById("img1");
  d = d + x;
  e.style.transform = "rotate(" + d + "deg)";
}
</script>
</head>
<body>
<img id="img1" src="sample.png" /><br>
<input type="button" value="右へ90度回転" onclick="kaiten(90);">
<input type="button" value="左へ90度回転" onclick="kaiten(-90);">
<input type="button" value="180度回転" onclick="kaiten(180);">
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>画像を回転させるサンプル</title>

var d = 0;

function kaiten(x){

var e = document.getElementById("img1");

d = d + x;

e.style.transform = "rotate(" + d + "deg)";

}

</script>

</head>

<body>

</body>

</html>

実行サンプル

ボタンを押すと、画像が回転します。

解説

JavaScriptでCSSのtransformを操作して回転させています。

執筆者：とら