文字や画像をCSSで回転させる方法を解説。CSSのtransformプロパティを使うと、HTMLに書いた要素を45度でも90度でも自由な角度で回転できます。transformの値にrotateを使えば2D(平面)で傾けられ、rotateXなどを使えばX軸・Y軸・Z軸を基準に3D(立体)で回転できます。Y軸で中心から180度反転させれば鏡文字も簡単に作れます。何かを回転させるCSSの書き方をご紹介。文宏ホームページ作成ガイドCSSのtransformプロパティなら、文字や画像を丸ごと回転できるウェブ上の文字や画像を90度回転させたければ、全体を画像化して加工するくらいしか方法がないと思われるかもしれません。文字や画像を45度だけ回転させたり上下や左右をひっくり返したりしたければ、やはり画像として加工するしか方法がないと思われるかもしれません。どちらの場合も画像加工は不要です。HTMLに書いた文字も画像も、CSSだけで回転させられるからです。■CSSのtransformプロパティなら、HTML上の任意の要素を自由な角度で回転可能CSSのtransformプロパティは、変形関数と呼ばれる特別な値を指定することで、HTML上の任意の要素を自在に変形させられるプロパティです。このtransformプロパティの値に「rotate」という変形関数を使って角度を指定すれば、下図のように30度でも45度でも90度でも自由な角度で、文字や画像などHTMLの要素を丸ごと回転させられます。画像でも文字でも、HTMLに書かれた要素を丸ごと自由な角度で回転させられるのが、CSSのtransformプロパティ■X軸・Y軸・Z軸を基準にして3D回転も可能このtransformプロパティは、机の上で紙を回転させるような2D(平面)での回転だけではなく、X軸・Y軸・Z軸を基準にした3D(立体)での回転もできます。Y軸を基準に180度回転させれば、下図左上のように鏡文字も作れます。本文の表示に使うことはあまりないでしょうが、ウインドウ端に表示するデザインなどに活用するとおもしろいかもしれません。■90度回転させてウインドウの端を有効利用するデザインなどに活用例の1つとして、下図のように横方向に並んでいる文字を90度回転させて縦向きにし、ウインドウの端に寄せておくデザインがあります。CSSでどのように回転させてもHTML上のテキストはテキストですから、範囲選択してコピーすることもできますし、検索対象にもなりますし、もちろんリンクもそのまま機能します。ページの端に90度回転させた文字やリンクを表示したい際にも画像化する必要はなく、transformプロパティに値rotateを指定するだけで済む文字単位や画像単位ではなくHTML内の特定の要素を丸ごと回転させられるため、「画像や文字やその他の装飾をすべて含んだボックス」の全体を任意の角度でぐるりと回転させられます。いちいち画像化して加工するような手間がないため、楽にデザインの幅を広げられるでしょう。今回は、CSSのtransformプロパティを使って、HTMLに書いた任意の要素を自由な角度で回転させる方法を解説いたします。補足:インライン要素を回転させたい場合は、inline-blockにする補足:古いブラウザへの対処方法CSSのtransformプロパティを使って様々に回転させたサンプルページCSSのtransformプロパティを使って自由な角度で回転させる書き方CSSを使って文字や画像を丸ごと回転させる方法はとても簡単です。transformプロパティの値に、rotate、rotateX、rotateY、rotateZなどの回転方法を示す変形関数名を使って望みの角度を指定するだけです。以下のように記述します。*/上記で「角度」と記した部分には、CSSで角度を表す単位「deg」を使った数値を記述します。「90deg」なら90度を示します。マイナス記号を使って負の値を指定することもできます。「45deg」だと時計回りに45度、「-45deg」だと反時計回りに45度になります。■具体的なCSSソースの書き方を解説するためのサンプルHTMLそれぞれの回転方法について具体的なCSSソースの書き方をご紹介する前に、説明用のHTMLソースを掲載しておきます。href="#link">自由な角度で</a>回転させられます。</p>p要素で作るボックス内に、画像と文章とテキストリンクが含まれています。このボックス全体に対してCSSでtransformプロパティを適用させるため、p要素に「samplebox」というclass名を付加しています。先程のHTMLソースを2Dで回転させるには、例えば以下のようにCSSソースを記述します。);}上記のCSSでは、HTMLに書いた要素全体が2Dで反時計回りに45度回転するため、下図のように左側へ斜めに傾けられた表示になります。上記のCSSでは角度に「-45deg」と負の値を指定しましたから、反時計回りに45度ほど回転します。360度で一回転するわけですから、正の値で「315deg」と指定しても同じ表示位置になります。X軸で3D回転させるtransform:rotateXの書き方X軸を基準にした3D(立体)で回転させるには、例えば以下のようにCSSソースを記述します。);}上記のCSSでは、X軸(水平方向の軸)を基準にして180度回転するため、下図のように上下をひっくり返した表示になります。※X軸を基準にして180度3D回転この状態でも、HTMLに書かれた機能はすべてそのまま有効ですから、テキスト部分をドラッグすれば範囲選択してコピーできますし、リンク部分はクリックもできます。Y軸で3D回転させるtransform:rotateYの書き方Y軸を基準にした3D(立体)で回転させるには、例えば以下のようにCSSソースを記述します。);}上記のCSSでは、Y軸(垂直方向の軸)を基準にして180度回転するため、下図のように左右がひっくり返った鏡文字のような表示になります。鏡文字を作りたいケースはあまりないでしょうが、画像の左右を反転させてキャラクターの向きを変えたいケースはありそうです。向きの異なる2枚の画像を用意せず、1枚の画像をCSSで反転させるだけで済むため、通信量と読み込み待ち時間を軽減できるメリットがあります。■X軸やY軸で90度回転させないように注意X軸やY軸を基準にして回転させる際は、角度に90度(90deg)を指定すると何も見えなくなりますので注意して下さい。机の上に垂直に立てている紙を真正面から見ているとき、その紙を奥に90度倒すと紙の縁しか見えなくなります。紙が薄ければ、ほぼ何も見えないでしょう。それが「X軸を基準に90度回転させた状態」です。Z軸で3D回転させるtransform:rotateZの書き方Z軸を基準にした3D(立体)で回転させるには、例えば以下のようにCSSソースを記述します。);}上記のCSSでは、Z軸(奥行き方向の軸)を基準にして60度回転するため、下図のように時計回りに60度回転した表示になります。※Z軸を基準に3D回転させた際の描画は、2Dで回転させた場合と同じです。transformプロパティを使って回転させる際の、占有空間に関する注意点transformプロパティを使って回転させる場合は、どの方向に回転させても他の要素の表示位置には一切影響しない点に注意が必要です。下図のように90度回転させても、周囲の要素が避けて表示されることはありません。中央を基準にして180度回転させる場合や、周囲にほとんど影響がないくらい浅い角度で回転させる場合以外は、回転後に表示される空間をあらかじめ確保しておく必要があります。回転する前の空間はそのまま占有され続ける上、周囲の要素の表示位置は変化しない※上図は、回転対象の要素を「左下を基準点にして回転」させた場合の表示例です。回転の基準座標を指定する方法は後述します。回転させた要素をページの端に移動させる際など、「対象の要素が元々描画されるはずだった空間」を空白の状態で残したくない場合があります。その場合は、例えば以下のようにCSSを書いて絶対配置にする方法があります。3px;positionプロパティに値「absolute」を指定することで絶対配置にすれば、他の要素の表示に影響しなくなります。そのため、どのように回転させても余計な空間は残りません。CSSで回転させる際のオプションや注意点などさて、CSSのtransformプロパティを使って任意の要素を回転させる基本はこれまでに解説した通りです。簡単に様々な角度で回転させられることがお分かり頂けたでしょう。次に、回転する基準点を指定する方法や、インライン要素を回転させたい場合の注意点、古いブラウザへの対処方法など、CSSで任意の要素を回転させるための補足情報を3点ほどご紹介いたします。回転する基準点を指定するtransform-originプロパティの書き方transformプロパティに値rotateなどを指定して回転させる場合、何も追記しなければ回転の基準点は「対象要素の中心」になります。下図のように左上や右下など、中心以外の点を基準にして回転させたい場合もあるでしょう。その際には、transform-originプロパティを併用することで回転の基準点を指定できます。左上端を基準にして回転するように指定したければ、以下のようにtransform-originプロパティを追記します。top;このtransform-originプロパティの書き方は、記事「CSS3のtransformで文字を長体や平体で表示する方法」の3ページ目にある項目「transform-originプロパティで変形の基準座標を指定する」で解説しています。詳しくはそちらをご参照下さい。■回転の基準点を中心にしたいか、角にしたいか左右反転や上下反転のように180度回転させる場合は、中心を基準にする方が表示位置が変わらずに済むため扱いやすいですから、わざわざtransform-originプロパティで回転の基準座標を指定する必要はないでしょう。角を基準にする方が配置座標を調整しやすい場合もあります。インライン要素を回転させたい場合は、inline-blockにするインライン要素も回転できるtransformプロパティを使って回転させる際、対象がp要素やdiv要素のようなブロックを作る要素なら、特に何も気にせずにCSSを適用するだけで回転させられます。a要素やspan要素のようなインライン要素を回転対象にしたい場合は、下記のようにdisplayプロパティに値「inline-block」を指定して、インラインブロック化しておく必要があります。*/}※図では、インラインブロック化された範囲が分かりやすいように、枠線(border)と背景色(background-color)を加えています。古いブラウザへの対処方法transformプロパティは、CSS3で追加された仕様です。古いブラウザでは認識できなかったり、認識するためにはプロパティ名にベンダープレフィックスを付けなければならない場合があります。古いバージョンを利用しているユーザ向けに、各ベンダープレフィックスを付けたものを並べて記述すると、以下のようになります。*/これらのベンダープレフィックスのどれを記述しておくかは、下記の対応バージョンを参考に判断して下さい。いえ、もはやベンダープレフィックスは一切不要だと判断しても問題はないでしょう。Firefox3.5~15では「-moz-」が必要。Chrome35以下では「-webkit-」が必要。Safari8以下では「-webkit-」が必要。Opera10.5~12では「-o-」が必要。15~22では「-webkit-」が必要。IE9では「-ms-」が必要。■SVG画像の回転に注意Edgeにはベンダープレフィックスは不要ですが、Edge16まではSVG画像を回転させることはできないので注意して下さい。Edge17以降ではSVG画像でも問題なく回転可能です。IE9~11ではベンダープレフィックスのあるなしに関係なく、SVG画像を回転させることはできません。IE8以下ではそもそも何も回転させられません。CSSのtransformプロパティを使って様々に回転させたサンプルページ本記事の冒頭でもご紹介した「横方向に並ぶリンク文字を90度回転させて縦向きにし、ウインドウの端に寄せる」デザインを使ったサンプルページを用意しています。HTMLソース中にコメントを加えてありますので、HTMLやCSSを記述する際の参考にして下さい。rotateサンプルページ1テキストリンクを含むHTMLをCSSで90度回転させてページ端に配置したサンプル表示例また、回転方法の例として記事中に数回掲載した、うさぎのイラストを用いたボックスの表示例も下図のようにサンプルページとして用意しています。こちらもHTMLソース中にコメントを加えてありますので、記述の際の参考にして下さい。今回は、CSSのtransformプロパティにrotateなどの変形関数を指定することで、文字でも画像でもHTML上の任意の要素を自由な角度で回転させる方法をご紹介いたしました。CSS3が普及するよりも前なら画像化して加工するしか実現方法がなかったデザインでも、今では短いCSSソースを書くだけで簡単に作れます。【編集部おすすめの購入サイト】ソフトバンクユーザーならYahoo!ショッピングでお買い物がおすすめ楽天市場でホームページ作成関連の書籍を見るAmazonでホームページ作成の参考書を見る※記事内容は執筆時点のものです。最新の内容をご確認ください。異なる可能性があります。About公式SNS日々の生活や仕事を楽しむための情報を毎日お届けします。