css,transform:rotate()

CSS：CSSで要素を回転させる方法「transform:rotate()」
Posted on 2014年8月17日
CSSの「transform:rotate()」を使用するとテキストや画像、指定した要素を
回転させて表示することができます。
transform: rotate(10deg);
rotate()には回転する角度を指定します。
下記のように「-」マイナスで指定することも可能です。
その場合は逆方向に回転して表示されます。
transform: rotate(-10deg);
要素を回転させて文字や画像を傾けて表示させたい場合などに利用できそうです。

raining
http://raining.bear-life.com/css/css%E3%81%A7%E8%A6%81%E7%B4%A0%E3%82%92%E5%9B%9E%E8%BB%A2%E3%81%95%E3%81%9B%E3%82%8B%E6%96%B9%E6%B3%95%E3%80%8Ctransformrotate%E3%80%8D







下記にCSSの「transform:rotate()」を使用して、要素を回転させて表示した時の方法を記載します。
■ 「transform:rotate()」の使用方法
【CSS】

【HTML】

test


raining
http://raining.bear-life.com/css/css%E3%81%A7%E8%A6%81%E7%B4%A0%E3%82%92%E5%9B%9E%E8%BB%A2%E3%81%95%E3%81%9B%E3%82%8B%E6%96%B9%E6%B3%95%E3%80%8Ctransformrotate%E3%80%8D

css_transform_rotate_1
「transition」プロパティを使用すれば、hoverした時にアニメーションで回転させることも可能です。
■ hover時にアニメーションで回転させる場合
【CSS】

【HTML】

test

他にも「rotateX()」「rotateY()」「rotateZ()」「rotate3d()」で
指定することもできます。
要素を傾けて表示させたり、hoverした時に要素を回転させたりなど、
サイトに動きが出せて面白いかもしれないです。

raining
http://raining.bear-life.com/css/css%E3%81%A7%E8%A6%81%E7%B4%A0%E3%82%92%E5%9B%9E%E8%BB%A2%E3%81%95%E3%81%9B%E3%82%8B%E6%96%B9%E6%B3%95%E3%80%8Ctransformrotate%E3%80%8D