[CSS3]transform:rotateでオシャレに決める




transform:rotateサイト制作にあたって画像の処理って結構メンドウですよね。
明るさ等はPhotoshop等の画像処理ソフトを使ったりなんですが、キレイな写真をページに無造作に貼り付けても面白く無いってときに役立つCSS3。

transform:rotateを使うと今までは画像処理ソフトでやっていた処理をCSSでできちゃいます。

img {
	border:5px solid #eee;
	-webkit-transform: rotate(5deg);
	-moz-transform: rotate(5deg);
	-ms-transform: rotate(5deg);
	-o-transform: rotate(5deg);
	transform: rotate(5deg);
}

トランフォーーーム!(ギュッギュッギュッ)とか言いながら上記のCSSをコピペ。

transform: rotate(5deg);

degとはCSS3の草案で定義されている角度の単位のことで360で円を一周するアレ。
もちろん時計回りに。

IEは9以降ならOKみたいですね。

タイトルとURLをコピーしました