初心者のWEBデザイン

HTML,CSS、その他WEBデザインに関する事を記述していきます

20150411143621

CSS 画像を回転させる

画像を回転させる場合には通常、前もって角度をつけた画像を用意しますが
CSS3から画像の角度を変更できるようになりました。
その方法を記述します。

任意で画像を用意しましょう。

画像に下記のCSSを記述するだけで角度が変わります。
角度は【数字+deg】を使います。

  • 20degは340°と同じ意味です。
img {
  transform: rotate(-25deg);
  -ms-transform: rotate(-25deg);/*IEベンダープレフィックス*/
  -webkit-transform: rotate( -25deg);/*Safari/Chromeベンダープレフィックス*/ 
  -moz-transform: rotate( -25deg);/*Firefoxベンダープレフィックス*/
  -o-transform: rotate( -25deg);/*Operaベンダープレフィックス*/
}

f:id:bellsmarket:20150410030113p:plain:w300f:id:bellsmarket:20150410030119p:plain:w300
IE8では効かないのでIE8を多用する方が閲覧するサイトなどで
使う場合には注意が必要です。

topへ戻る