HTML で画像を回転する
この記事では、HTML で画像を回転させる方法を紹介します。
HTML で transform CSS プロパティを使用して画像を回転させる
CSS の transform プロパティは、コード内の特定の要素を変更することを意味します。変換するには、外部リソース（この場合は変換する画像）が必要です。このプロパティは、2D または 3D 変換を要素に適用します。さらに、このプロパティは、詳細に回転、拡大縮小、移動、傾斜などの権限も与えます。また、CSS ビジュアルフォーマットモデルの座標空間も変更します。レイアウトが CSS ボックスモデルによって管理されている要素は、変換することしかできません。transform プロパティを rotate() 関数に設定して、HTML で画像を回転させる関数の単位を指定できます。画像を回転させる値は、関数の括弧内に指定する必要があります。deg 単位は、回転値を指定するために使用されます。この目的のためにインライン CSS を使用できます。CSS は <img> タグで使用されます。
たとえば、HTML に <img> タグを付けた通常の画像を挿入します。src 属性を https://loremflickr.com/320/320 に設定します。次に、90 度回転するには、画像を挿入し、それにいくつかのスタイルを追加します。style 属性で、transform プロパティを rotate(90deg) に設定します。次に、<br> タグを追加します。同様に、画像を 180 度と 360 度に回転させます。
以下の例は、HTML の画像ソース内の画像を回転させる方法を示しています。<img> タグのスタイルを設定しました。これは、挿入された画像を transform:rotate() プロパティで回転できることを意味します。元の画像を挿入し、画像を 90、180、360 度に回転させました。rotate() 関数で目的の次数値を書き込むことができます。例の 2 番目の画像は、軸の半分まで回転します。3 番目の画像は、180 度に回転しているため、逆さまに見えます。画像が 360 度の回転を完了すると、元の画像のように見えます。したがって、transform() プロパティと rotate() 値を使用して、HTML と CSS を使用して画像を回転させることができます。
サンプルコード：
<html>
<body>
Original Image
<img src="https://loremflickr.com/320/320" /> <br>
90 degree Rotation
<img src="https://loremflickr.com/320/320" style="transform:rotate(90deg);"> <br>
180 degree Rotation
<img src="https://loremflickr.com/320/320" style="transform:rotate(180deg);"> <br>
360 degree Rotation
<img src="https://loremflickr.com/320/320" style="transform:rotate(360deg);"> <br>
</body>
</html>
Sushant is a software engineering student and a tech enthusiast. He finds joy in writing blogs on programming and imparting his knowledge to the community.
LinkedIn