rotateサンプル

従来、ウェブ上で文字を90度回転させようと思えば、画像化して加工するくらいしか方法がありませんでした。 また、画像を回転させたり左右や上下を逆にしたりするには、やはり画像そのものを加工する必要がありました。 しかし、CSS3のtransformプロパティを使うと、30度でも45度でも90度でも、自由な角度で文字や画像など「対象の要素」を丸ごと回転させられます。

例えば、「横方向に並ぶ文字列をそのまま90度回転させて、ウインドウ端に寄せる」といったデザインが、画像化して加工することなく簡単に実現できます。 どのように回転させてもテキストはテキストですから、範囲選択してコピーもできますし、検索対象にもなりますし、もちろん、リンクもそのまま機能します。

文字単位や画像単位ではなく、「要素を丸ごと」一括して回転できるので、 「画像や文字やその他の装飾をすべて含んだボックス」をそのまま任意の角度でぐるりと回転でき、デザインの幅が広がります。

机の上で紙を回転させるような「2D（平面）での回転」だけでなく、X軸・Y軸・Z軸を基準にした立体的な回転も可能です。 例えば、Y軸を基準に180度回転させることで「鏡文字」も作れます。

本文の表示に使うことはあまりないでしょうが、ウインドウ端などに表示するデザイン目的などに活用すると、おもしろいかもしれません。