CSSで文字を回転させる｜transform: rotate()
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軸の回転などもあるので色々試してみて下さい。
