読者です 読者をやめる 読者になる 読者になる

one's way blog

ワクワクを生み出せるWebエンジニアを目指して。

CSSで文字を回転させる|transform: rotate()

f:id:seintoseiya:20150407222015p:plain
transform: rotate()を使って、テキストを-90度回転させる方法です。
書式は以下の通り。

rotate(回転角度)
※回転確度の単位はdegを使う

サンプルページ

プロジェクトNo.5:Horizon
Scroll downの文字列ブロックを回転させています。

CSS

#description{
	-moz-transform: rotate(-90deg);
	-webkit-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
	transform: rotate(-90deg);
	/* 省略 */
}

ベンダープレフィックス

前回の記事でも紹介しましたが、transformプロパティも先攻実装された機能のため、古いバージョンのブラウザに対応するためにベンダープレフィックスが必要な場合があります。
どのブラウザが対応しているかは、Can I use... Support tables for HTML5, CSS3, etcで確認して下さい。

transformプロパティをinlineで使用したい場合

transformプロパティはblock要素に対して使用できます。
もしinlineで使いたい場合はdisplay: inline-block;を指定すると利用できます。

ここで紹介したのはtransformプロパティのほんの一部で、
文字以外にも回転できたり、z軸の回転などもあるので色々試してみて下さい。

参考書籍

現場のプロが教えるHTML+CSSコーディングの最新常識 知らないと困るWebデザインの新ルール4

現場のプロが教えるHTML+CSSコーディングの最新常識 知らないと困るWebデザインの新ルール4

できるポケット HTML5&CSS3/2.1全事典

できるポケット HTML5&CSS3/2.1全事典