【覚書】HTMLタグで画像を反転／回転させる方法

WEBデザイン

2020.03.09 2016.10.11

HTMLタグで画像を反転／回転させるには、

［transform］

で左右反転できるみたいですね。

例えば…

いつぞやの記事に使ったアッテネータの概略図



普通に書くとこうですが
<img src="画像のアドレス">

こうすると
<img src="画像のアドレス" style="transform: scale(-1, 1);">
　↓
左右反転しましたね


さらに上下反転も
<img src="画像のアドレス" style="transform: scale(-1, -1);">


縦横比を変える事もできるようですが
<img src="画像のアドレス" style="transform: scale(1.3,0.7);">


画像がはみ出してしまうようですね。。。

さらに、オプションでrotateを指定すると回転させることもできるようです。

こう書くと

<img src="画像のアドレス" style="transform: rotate(-90deg);transform-origin:right top;">

こうなります


　　　　↓


※［transform-origin］で回転の基準位置を指定できます。

［transform-origin:right top;］と書くと右上が基準位置になる。

ただし、回転はするけれど専有範囲は回転する前と同じだけ空いてしまうのと、回転したことによって画像がはみ出したりすることがあるので、正方形の画像でない限り、positionなどで位置を調整してやる必要があるようです。

この方法はレスポンシブデザインには使えないですね。