JavaScript で画像を回転させる

HTML 要素の回転は、CSS を使用して実行される一般的な要件です。CSS は、このタスクを実行するために使用できる変換プロパティを提供します。この記事では、JavaScript を使用して画像を回転させる方法を学習します。

JavaScript で CSS 変換を使用して画像を回転させる

CSS 変換プロパティを使用すると、要素を回転、拡大縮小、傾斜、または移動できます。CSS ビジュアルフォーマットモデルの座標空間を変更します。プロパティの値が none 以外の場合、スタッキングコンテキストが作成されます。この場合、要素はコンテナブロックとして機能し、その位置は、含まれる要素に応じて position: fixed または position: absolute のいずれかに設定されます。

transform プロパティは、none キーワードまたは 1つ以上の transform 関数として指定できます。パースペクティブ()がいくつかの関数値の 1つである場合、それが最初に表示される必要があります。

構文：

transform: none;
transform: translateX($Xpx) rotate($Ydeg) translateY($Zpx);

1つ以上の CSS 変換関数を適用する場合、変換値は transform-function です。変換関数は左から右に乗算されます。右から左への化合物では、変換が効果的に適用されます。上記の構文では、特定のピクセルを持つ要素を水平方向に変換する translateX、特定のピクセルを持つ要素を垂直方向に変換する translateY、および要素を一定の角度で回転させる rotate を使用します。2D 平面上の固定点。

none は、変換を適用しないことを示します。詳細については、transform のドキュメントを参照してください。

<input id="button" type="button" value="Rotate">
<div id="img_container">
    <img src="https://www.google.com/images/srpr/logo3w.png" id="image">
<div>

let angle = 0, img = document.getElementById('img_container');
document.getElementById('button').onclick = function() {
  angle = (angle + 90) % 360;
  img.className = 'rotate' + angle;
}

#img_container.rotate90 {
  width: 100px;
  height: 820px
}
#image {
  transform-origin: top left;
  -webkit-transform-origin: top left;
}
#img_container.rotate90 #image {
  transform: rotate(90deg) translateY(-100%);
  -webkit-transform: rotate(90deg) translateY(-100%);
}

上記のコードでは、コンテナを作成し、ユーザーが回転ボタンをクリックするたびに、現在の角度に 90 度を追加し、360 度のモジュラスを取得します。最終的な角度が見つかったら、CSS を使用してプロパティが宣言されている事前定義されたクラスを追加できます。

この例は 90 度の回転のみを示していますが、45 度や 105 度などの任意の角度に定義できます。上記のコードの出力は次のようになります。