HTML | 画像の向きの変更、上下左右の反転
HTMLで画像の向きを変更する方法とサンプルコードを紹介しています。
HTMLで画像の向きを変更する
HTML画像の向きを変更するタグや専用の属性はありませんが、style属性にて「transform」プロパティに「rotate()」で目的の角度に調節します。
「rotate()」の単位は「deg」で「0deg」または「360deg」で
<img style="transform: rotate(90deg);" src="https://1-notes.com/wp-content/uploads/2019/02/profile.png" alt="画像の説明">
<img style="transform: rotate(180deg);" src="https://1-notes.com/wp-content/uploads/2019/02/profile.png" alt="画像の説明">
<img style="transform: rotate(270deg);" src="https://1-notes.com/wp-content/uploads/2019/02/profile.png" alt="画像の説明">
HTMLで画像を上下または左右で反転させる
画像を上下反転させるには、「transform」プロパティに「scaleY(-1)」を指定します。
左右反転は「scaleX(-1)」を指定します。
<img src="https://1-notes.com/wp-content/uploads/2023/06/snowman.png" alt="画像の説明">
<img style="transform: scaleY(-1);" src="https://1-notes.com/wp-content/uploads/2023/06/snowman.png" alt="画像の説明">
<img style="transform: scaleX(-1);" src="https://1-notes.com/wp-content/uploads/2023/06/snowman.png" alt="画像の説明">