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などで位置を調整してやる必要があるようです。 この方法はレスポンシブデザインには使えないですね。
![]() ![]() |
1冊ですべて身につくHTML & CSSとWebデザイン入門講座 [ Mana ] 価格:2,486円 |

![]() ![]() |
【中古】 Adobe Illustrator 8.0スーパーガイドfor Windows Win版 / 宮本 幸男 / 秀和システム [単行本]【ネコポス発送】 価格:526円 |

![]() ![]() |
ワコム ペンタブレット Intuos Art ペン&タッチ 絵画・油彩制作用モデル Mサイズ ミントブルー CTH-690/B0 価格:16,551円 |

コメント