サイトロゴ

Enjoy Creating
Web & Mobile Apps

MENU BOX
WEB
MOBILE
OPEN

ホーム

 > 

 > 

要素を傾ける・回転させる(CSS:rotate)

要素を傾ける・回転させる(CSS:rotate)

この記事にはプロモーションが含まれています。

HTMLで配置したテキストや画像などのあらゆる要素は、傾き0°(水平)に並べられます。
要素を全て水平に並べても問題はないのですが、躍動感や遊び心を表現したい場合、要素のレイアウトを工夫する必要があります。
そこで今回は、要素を回転させることができるtransform: rotate( )を紹介していきます。

– 目次 –

動画内容:要素の回転

まずは要素を回転させることでイメージがどのように変化するのか、実際に見ていただこうと思います。以下の2つのサンプルを見比べてみてください。

おすすめハンバーガー!

ハンバーガー

おすすめハンバーガー!

ハンバーガー

上のサンプルのように回転を加えない(水平に並んでいる)方は、まじめ・規則正しい・素直・大人・真剣…といったイメージを与えます。
一方で、要素を回転させた方は、明るい・楽しい・遊び心・子ども・自由…といったイメージになります。

2つのサンプルの違いは、要素の回転の有無だけですが、それだけでもイメージがガラッと変わるのが分かりますね。

派手なアニメーションや画像、こだわったフォントに頼らずとも、ある程度なら要素の回転だけで表現することも可能なので、rotate( )の使い方をしっかりマスターしていきましょう!

rotate( )の基本:要素を回転させる

rotate( )は、translate( )などと同じく、transformプロパティの値の1つです。

CSS解説: transformプロパティ

rotate( )の、 () マルカッコ の中に、要素をどれだけ回転させるかの数値(と単位)を記入します。

なお、rotate( )で使用できる単位には、角度を表すdegと、回転度合いを表すturnなどがありますが、本記事ではdegを使って解説していきます。

rotate( )だけでなく、角度を指定することができるCSS(linear-gradient( )など)全般に言えることですが、正の値だと右回りに回転・負の値だと左回りに回転します。

負の値を含めた数値を入力できるサンプルを用意したので、正の値と負の値、それぞれ入力してみてください。
もとの数値よりもプラスになれば右回りに、マイナスになれば左回りに回転します。

rotate(deg)

右に傾けたいなら正の値で、左に傾けたい場合は負の値で指定すると良いということですね。

rotate( )の大まかな仕組みがわかったところで、サンプルとコードを確認していきましょう。

rotate(45deg)
    <div class="sample_rotate01_box">
      <div class="sample_rotate01">rotate(45deg)</div>
    </div>

    .sample_rotate01_box {
      margin: 2rem auto;
      width: 200px;
      height: 200px;
      border: dashed;
    }
    .sample_rotate01 {
      width: 200px;
      height: 200px;
      background-color: rgba(255, 0, 0, 0.4);
      display: flex;
      justify-content: center;
      align-items: center;
      transform: rotate(45deg);
    }

また、rotate( )はspanタグなどの一部のインラインレベルの要素を除いて、ほとんど全ての要素を回転させることができます。

また、特に使用機会が多いのは次のような要素に対する回転です。

*rotate( )の使用シーン*
画像の回転
配置した画像を斜めに傾けるだけで、ページに躍動感やアクセントを出すことができます。

テキストの回転
長文のテキストは傾けると読みづらくなってしまいますが、タイトルやタイトルの1文字だけなど、限られた部分であればテキストを回転させることで動きをつけるのも効果的です。

逆にrotate( )の出番がないのは、入力フォームや重要なお知らせなどです。

デザイン性より見やすさを優先すべき要素に対しては、あまり動きをつけない方が良いでしょう。

    POINT!
  1. ・rotate( )のカッコの中に、要素を回転させたい度合いを数値+単位(degなど)で指定する!
  2. ・正の値だと右回りに、負の値だと左回りに回転する!
  3. ・画像や短いテキストなどを傾けることで、Webページに動きを出せる!

360°を超えた場合

回転はdeg(角度)指定の場合、360でちょうど1回転(見た目上回転しない)ことになります。

では、360を超える数値を指定するとどうなるでしょうか?無効になってしまうのでしょうか?

結論から言うと、1回転を超えてさらに回転します。

見た目上の表示結果は同じですが、下のサンプルをご覧ください。

rotate(45deg)

rotate(405deg)

上のサンプルはrotateの角度を45deg、下は405degの指定にしています。
どちらとも同じ角度傾いていますが、下のサンプルは1回転した上でさらに傾いた結果、45degと同じ傾きになっています。

1回転しているということを確認できるように、rotate( )を解除できるボタンを用意しました。それぞれ解除ボタンを押して動きを確認してみてください。

rotate(45deg)

rotate(405deg)

解除ボタンを押すと、上のサンプルは傾いていた45°だけ回転して0°に戻るのに対し、下のサンプルは1回転+45°回転して0°に戻るのが確認できました。

「…だから何?」と思われるかもしれませんが、この仕様は回転のアニメーションを実装したい場合に知っておくと役立ちます。

普通に要素が傾くアニメーションであれば、傾けたい角度をそのまま指定すれば良いですし、1回転させた上で任意の角度に傾けたい場合は、傾けたい角度に360を足す必要があるということになります。

ただし、激しい回転のアニメーションは目(脳)に対する負荷が大きく、人によっては見続けると画面酔いをしたようになって気持ちが悪くなる場合もあります。

回転に限らず、アニメーションを実装する際に言えることですが、本当にそのアニメーションが必要か?ということをしっかり検討する必要があります。

    POINT!
  1. ・要素は1回転を超えて回転させることができる!
  2. ・1回転した上で傾けるアニメーションを実装したい場合、傾けたい角度に360を足すと良い!
  3. ・ただし、回転のアニメーションの多用には注意が必要!

回転の基準位置

未指定の場合、要素の中心を基準として要素が回転しますが、この基準点は変更可能です。
transformプロパティとは別のCSSになりますが、要素の回転と一緒に覚えておきたいテクニックなので、簡単に紹介しておきます。

回転の基準点を変更するには、transform-originプロパティを適用させます。

まずは回転の基準位置を変えると表示がどのように変わるのか、サンプルを見てみましょう。

rotate(15deg)

rotate(15deg)

それぞれ、回転の基準位置に緑色の丸マークをつけています。

上のサンプルは今まで紹介してきたものと同じで、transform-originプロパティは未設定です。要するに、規定値である、transform-origin: center;と指定したのと同じになっています。

一方、下のサンプルはtransform-origin: top left;としています。
解説を加えなくてもなんとなくイメージできるかと思いますが、回転の基準位置を左上にする指定です。

rotate( )の角度の指定が同じであれば、回転の基準位置によって傾き加減が変わることはありません。基準位置によって変わるのは傾いた要素の位置になります。

なので基準位置を変更せずとも、傾けた後でpositionプロパティで好きな位置に動かしても問題ありません。

ただし、回転のアニメーションを実装する場合は、回転の基準位置によって動きがガラッと変わるので注意が必要です。

transform-originプロパティの値は、topなどのキーワード値や、数値+pxなどで指定することができます。

*transform-originの値について(例)*

説明
center既定値。要素の中央が基準位置になる
top leftキーワード値を2つ指定することにより、左上(topとleft)、右下(bottomとright)などを基準位置にすることができる
30px 60px数値+単位の場合、1つ目に指定した数値が横(正の値では右)方向、2つ目に指定した数値が縦(正の値では下)方向の基準位置の移動になる

transform-originプロパティの値の指定の仕方は他にも色々ありますが、ここでは代表的な値の指定方法だけ簡単にまとめておきました。

ちなみにですが、transform-originプロパティは、transformを適用させる(回転させる)要素と同じセレクタ指定にします。
変形させる要素の親要素に指定…とかではないので、ご注意ください。

以下、transform-origin: top center;…と指定したときの表示結果とコードの紹介です。

rotate(15deg)
    <div class="transform_origin_box">
      <span></span>
        <div class="transform_origin_top_center">rotate(15deg)</div>
    </div>

    .transform_origin_box {
      margin: 3.5rem auto;
      width: 200px;
      height: 200px;
      border: dashed;
      position: relative;
    }
    .transform_origin_box span {
      display: block;
      width:10px;
      height:10px;
      background-color: rgb(106, 223, 138);
      position: absolute;
      top: -5px;
      left: 0;
      right: 0;
      margin: auto;
      z-index:1;
      border-radius: 50%;
      border: solid black;
    }
    .transform_origin_top_center {
      width: 200px;
      height: 200px;
      background-color: rgba(255, 0, 0, 0.4);
      display: flex;
      justify-content: center;
      align-items: center;
      transform-origin:top center;
      transform: rotate(15deg);
    }
    POINT!
  1. ・transform-originプロパティで回転の基準位置を変更できる!
  2. ・基準位置を変更しても傾き加減はそのままだが、要素の位置が変わる!
  3. ・アニメーションにしないのであれば、positionプロパティで移動させても良い!

tlanslate( )と併用時の注意点

transformプロパティは本記事で紹介しているrotate( )の他に、translate( )と同時に指定することも可能です。

ですが、tlanslate( )と組み合わせる時は、指定の順序に注意が必要なので、この章で解説していきます。

まずは、translate(15px,30px)を設定して要素を右下に移動させた後で、rotate(15deg)で回転を指定してみます。

rotate(15deg)

では次に、rotate(15deg)を設定して要素を傾けた後で、translate(15px,30px)で右下への移動を指定した表示結果を確認していきましょう。

同じ表示結果になりそうなものですが…?

rotate(15deg)

表示結果が微妙に違うのがわかるかと思います。
順序が違うだけで同じ値を指定しているのに、表示結果が変わるのはなぜでしょうか?

それは、translate( )で移動させる前にrotate( )で回転させると、回転させた後の軸(X軸・Y軸)に従って移動が行われるからです

表示結果の違いをより分かりやすく体感できるよう、rotate( )とtranslate( )の設定の順序を切り替えられるボタンを用意しました。微妙な違いを確認してみてください。

translate→rotate

考え方の違いではありますが、個人的にはtranslate( )で移動させてからrotate( )で回転させた方がわかりやすいかと思います。

rotate( )とtranslate( )を併用していて、なんだか思ったような配置と回転にならないな?と思った時は、値の指定の順序に問題がないか確認するようにすると良いでしょう。

ちなみに併用時の記述は、
transform: translate(100px) rotate(45deg)

というふうに、半角スペースを空けて続けて値を書くだけでOKです。 , カンマ などはいらないので、余計なものを入れないように気をつけましょう。

    POINT!
  1. ・rotate( )はtranslate( )と併用指定が可能!
  2. ・しかし、指定する順番によって同じ数値指定でも表示結果が変わってしまう!
  3. ・translate( )から指定した方がわかりやすい(かも)!

ワンポイントチェック

rotate( )は要素をまるごと回転させるので、テキストの一部だけ回転させたい場合、pタグなどテキスト全体の要素をセレクタにしてもうまくいきません。

Webで遊ぼ!

▲のようにテキストの一部だけ回転させるには、該当のテキストを<span>タグなどで挟んで、それをセレクタにする必要があるわけですが、spanタグはrotate( )が効かないインラインレベルの要素のため、そのままでは回転しません。

ただ解決策は至って簡単で、spanタグにdisplay: inline-block;を追加するだけでOKです。

rotate( )のように、要素をブロックレベル化(display: block;)にするわけにはいかないけど、インラインレベルだとCSSが効かない…というケースでは、インラインブロック(inline-block)にするとうまくいくことも多いです。

というわけで、テキストの1字1字がそれぞれ傾いたテキストのサンプルとCSSコードを紹介しておきます。

Web

    <p>
      <span class="span1">W</span>
      <span class="span2">e</span>
      <span class="span3">b</span>
      <span class="span4">で</span>
      <span class="span5">遊</span>
      <span class="span6">ぼ</span>
      <span class="span7">!</span>
    </p>

    p {
      background-color: darkblue;
      width: fit-content;
      margin: 2rem auto;
      padding: 10px;
      letter-spacing: 2.5px;
      border-radius: 6px;
      border: dashed white;
      box-shadow: 0 0 0 7px darkblue;
    }
    p span {
      display: inline-block;
      font-size: 2rem;
      font-weight: bold;
    }
    .span1 {
      color: lightblue;
      transform: rotate(-15deg);
    }
    .span2 {
      color: lightpink;
      transform: rotate(15deg);
    }
    .span3 {
      color: lightyellow;
      transform: rotate(-5deg);
    }
    .span4 {
      color: lightgreen;
      transform: rotate(10deg);
    }
    .span5 {
      color: lightsalmon;
      transform: rotate(-5deg);
    }
    .span6 {
      color: pink;
      transform: rotate(5deg);
    }
    .span7 {
      color: aliceblue;
      transform: rotate(-9deg);
    }

特別なフォントを使用したかったり、テキストを傾ける以外にも様々な特殊効果を適用させたい場合は、Photoshopなどで画像として作成して配置した方が効率が良いと思いますが、上のサンプル程度の装飾であればCSSのみでも十分対応可能です。

CSSのみで表現することで、画像を読み込む必要がなくなり、Webページが軽量化できます。

Webページが軽い(=高速表示できる)というのは、SEO対策としても重要なポイントであるため、画像化する前にCSSで対応できないか検討してみることも大切です。


今回の動画で紹介したコード!

今回の解説動画で使用したコードを掲載しています。学習用としてご自由にコピペしてお使い下さい。(※スクロールできます)

<!DOCTYPE html>
<html lang="ja" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      .outer_box {
        width: 500px;
        height: 500px;
        margin: 550px auto;
        border: dashed black;
        position: relative;
      }
      .rotate {
        width: 500px;
        height: 500px;
        background-color: rgba(41, 249, 243, 0.49);
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .rotate_box1 {
        transform: rotate(45deg);
      }
      .rotate_box2 {
        transform: rotate(-45deg);
      }
      .rotate_box3 {
        transform-origin: top left;
        transform: rotate(15deg);
      }
      .center_point {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        border: solid black;
        position: absolute;
        z-index: 1;
        top: -25px;
        left: -25px;
        background-color: pink;
      }
      .rotate_box4 {
        transform: translate(150px) rotate(45deg);
      }
      .rotate_box5 {
        transform: rotate(45deg) translate(150px);
      }
      .flex {
        display: flex;
      }


    </style>
  </head>
  <body>
    <div class="outer_box">
      <div class="rotate rotate_box1">
        rotate(45deg)
      </div>
    </div>

    <div class="outer_box">
      <div class="rotate rotate_box2">
        rotate(-45deg)
      </div>
    </div>

    <div class="outer_box">
      <span class="center_point"></span>
      <div class="rotate rotate_box3">
        transform-origin: top left・rotate(15deg)
      </div>
    </div>

    <div class="flex">
      <div class="outer_box">
        <div class="rotate rotate_box4">
          transform: translate(150px) rotate(45deg)
        </div>
      </div>

      <div class="outer_box">
        <div class="rotate rotate_box5">
          transform: rotate(45deg) translate(150px)
        </div>
      </div>
    </div>

  </body>
</html>

« »

カテゴリーリンク

著者について- author profile -

ROYDOプロフィール写真
Michihiro

モバイルアプリ(iOS・Android)ディベロッパー&デザイナー

これまでに、可読性の高いカラーパターンを自動で生成するアプリや、『第3火曜日』といった形式で通知をスケジュールできるアプリなどを制作。

サブでWebデザイン・フロントエンドエンジニアとしても活動しています。

📝ツール・言語:JavaScript/React Native/Kotlin/Android Studio/Swift/SwiftUI

🎓資格:応用情報技術者/基本情報技術者/ウェブデザイン技能検定3級

Twitterアイコン Instagramアイコン