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

おすすめハンバーガー！

おすすめハンバーガー！

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

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

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

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

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

CSS解説：＃ transformプロパティ

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

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

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

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

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

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

    <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( )の出番がないのは、入力フォームや重要なお知らせなどです。

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

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

360°を超えた場合

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

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

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

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

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

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

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

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

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

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

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

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

回転の基準位置

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

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

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

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

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

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

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

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

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

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

＊transform-originの値について（例）＊

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

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

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

    <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)を設定して要素を傾けた後で、translate(15px,30px)で右下への移動を指定した表示結果を確認していきましょう。

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

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

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

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

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

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

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

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

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