HTML/CSS

【CSS】transform:rotate()で要素を回転させる方法

本記事では、CSSのtransform:rotate()を使って要素を回転させる方法について解説しています。

近年のwebサイトでは当たり前のようにアニメーションが使われており、transform:rotate()を使う機会も以前に比べかなり増えました。

transform:rotate()を使いこなすことで、一気に作成できるアニメーションの幅が広がるので頑張って習得しましょう。

HTML/CSSの学習におすすめ参考書
1冊ですべて身につくHTML&CSSとWebデザイン入門講座

参考書が苦手な人はUdemyの動画がおすすめ
ちゃんと学ぶ、HTML+CSS&JavaScript入門講座

動画情報
作成者たにぐち まこと
学習時間9時間
受講者数43,706人
レビュー (9,232件)
動画の詳細はこちら

transform:rotate()とは?

transformプロパティとは指定した要素の形を変形させたり、位置をずらしたりすることができるプロパティです。

transformプロパティには様々な値を設定することができ、その中の一つにrotate()があります。このrotate()は指定した要素を回転させることができます。

四角形のHTMLを作成

以降の解説で実際に四角形の要素を例にroate()の使い方について解説していきます。

自分のパソコンでコードを入力しながら確認したい方は以下のサンプルコードを使用してください。

<div id="container">
  <div id="rect">四角形の要素</div>
</div>
#container {
  text-align: center;
  margin-top: 200px;
}

#rect {
  width: 300px;
  height: 300px;
  background: orange;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  font-weight: bold;
}
サンプルコードの表示結果
サンプルコードの表示結果

transform:rotate()の使い方

transform:rotate()の使い方は以下のとおりです。

transform: rotate(45deg);
rotate(45deg)の表示結果
rotate(45deg)の表示結果

見たことのないdegという単位が出てきましたね。これは角度を表す単位で45degと設定した場合、時計回りに要素が45度回転するという意味になります。

degは負の数も設定することができます。例えば、要素を270度回転させたい時270degと書くのではなく-90degと書いても同じ結果になります。この場合の注意点として、アニメーションをさせる場合はこの角度は正確に指定する必要があります。

例えば、アコーディオンで下に向いている矢印を開いた時に上に向かせたい場合、90degと書いた場合時計回りに矢印が回転し、-90degと書いた場合は反時計回りに矢印が回転します。このようにrotate()を使ってアニメーションさせたい場合はどのような動きにしたいかを正しく値に設定しましょう。

rotate()には単純な角度の回転の他にもX軸方向にだけ回転させることや3D回転させることもできます。

rotateX()

rotateX()はX軸方向に要素を回転させることができます。

transform: rotateX(180deg);
rotateX(180deg)の表示結果
rotateX(180deg)の表示結果

rotateX(180deg)にすると、形に変化は見られませんが文字が上下に反転しているのが確認できます。この理由はX軸方向に180度回転することで上下の位置が入れ替わるためです。

rotateY()

rotateY()はY軸方向に要素を回転させることができます。

transform: rotateY(180deg);
rotateY(180deg)の表示結果
rotateY(180deg)の表示結果

rotateY(180deg)にすると、rotateX(180deg)と同じように形に変化は見られませんが文字が左右に反転しているのが確認できます。この理由はY軸方向に180度回転することで左右の位置が入れ替わるためです。

transform-origin

これまで紹介してきたtransform関連は要素をどのように回転させるか指定するものでしたが、ここで紹介するtransform-originプロパティは少し異なり要素が回転する起点となる位置を指定します。

rotate()で紹介した45度傾けるコードに対して、transform-originプロパティを使ってどのような変化をもたらすのか確認してみましょう。

transform: rotate(45deg);
transform-origin: bottom right;
transform-origin: bottom rightの表示結果
transform-origin: bottom rightの表示結果

実行結果を確認すると、要素の位置がずれていることが確認できます。これはtransform-origin: bottom right;で四角形の右下を起点に要素を回転させるという指定をしているからです。

transform-originは「center」「top」「bottom」「left」「right」の値を指定できる他、「20px」などの任意の値を指定することも可能です。

ブログランキング・にほんブログ村へ PVアクセスランキング にほんブログ村