transform:rotate 要素を回転させる方法

CSS

【CSS transform rotateの使い方】要素を回転させる方法

2022年8月26日

今回は要素を回転させることができるCSS「transform:rotate()」の使い方を紹介します。

rotate()を使用すると、マウスホバー時に要素を好きな角度で回転させたりといった実装できるようになります。

実際によく見る例では、ハンバーガーメニューの上下の棒を45度回転させたりといった実装が挙げられます。
ハンバーガーメニューサンプル
 

 

transformで利用するrotate関数

rotateはCSS関数の1つで、要素を中心点や軸を基準に回転させることができます。

■(参考)rotateを使用してホバー時に要素を360℃回転させている例

マウスホバー時に要素を360℃回転させている例
 

なお、rotate関数はCSSプロパティではなく関数なので、transformプロパティの値として使用。引数には回転角度を指定するので、pxではなく「deg」を単位として使用します。

transform: rotateの指定方法

「deg」は回転角度の度数を表す英単語「degree」から来ています。

また、正の数・負の数の両方を使用することができ、正の数を使用した場合は時計回り、負の値を使用した場合は反時計回りに要素を回転させることが可能です。

rotate()の引数に正の値、負の値を指定した場合の回転方向を解説している図

 

transformプロパティで指定できる関数一覧

なお今回の記事では、rotate関数の使い方のみを解説しますが、transformプロパティではrotate()以外にも使用できる関数が複数存在。

そこで、以下ではtransformプロパティで指定できる関数をまとめました。興味がある方は、他の関数の使い方も調べてみて下さい。

■(参考)transformプロパティで指定できる関数まとめ

rotate()  要素を回転させることができる関数
translate() 要素を移動させることができる関数
scale() 要素を伸縮させることができる関数
skew() 要素を歪ませることができる関数

 

 

rotateを使って要素の中心を基準に回転させる方法

rotate()を使って要素の中心を軸に回転させる方法

rotate()を使って要素の中心を軸に回転させる方法を紹介します。

rotate()は前述したように引数に回転角度を記述することで、要素の中心を基準に回転させることが可能です。

マウスホバー時に要素を360℃回転させている例

rotate()では、要素の中心点を基準に、指定した角度分回転する

上の例では「360deg」と指定するとホバーをすると右方向(時計回り)に360度回転していることが分かります。
 

なお「-360deg」のように負の値を指定すると左方向(反時計回り)に回転させることも可能。また、要素の中心ではなくx軸やy軸を軸として要素を回転させたい場合は、rotateX()やrotateY()といった関数が使用できます。

rotate() 要素の中心点を基準に、要素を回転させることができる関数
rotateX() x軸を軸として要素を回転させることができる関数
rotateY() y軸を軸として要素を回転させることができる関数
(補足)rotateZ() z軸を軸として要素を回転させることができる関数。

(※)実質的にはrotate()と同じ動きになります。
(※)なお利用シーンは限られる為、ここでは解説を割愛します。

(補足)rotate3d() 第1、2、3引数で回転軸を設定し、第4引数で回転角度を指定することで要素を立体的に回転させることができる関数。

(※)利用シーンは限られるためここでは解説を割愛します。

以下では、rotateX()とrotateY()を使用して要素を回転させた際の挙動を確認していきます。

 

rotateX()を使ってx軸を軸に要素を回転させる方法

rotateX()を使用するとx軸を軸に要素を回転させることができます。

rotateX()では、x軸を軸に要素を回転する

以下のように要素をx軸を中心に要素を縦方向に回転させることができます。

マウスホバー時にx軸を軸として要素を360℃回転させている例

 

rotateY()を使ってy軸を軸に要素を回転させる方法

rotateY()を使用するとy軸を軸に要素を回転させることができます。
rotateY()では、y軸を軸に要素を回転する

 
以下のように要素をy軸を中心に要素を横方向に回転させることができます。

マウスホバー時にy軸を軸として要素を360℃回転させている例

 

 

rotate()の回転軸を移動させる方法

なおデフォルトでは要素の中心を起点に要素が回転されるようになっています(x方向に50%、y方向に50%)。この起点を変更したい場合はtransform-originプロパティと呼ばれるCSSプロパティを使用します。

値は最大3つまで指定することが可能で、前から順にx、y、z座標の位置を指定。(※z座標を省略した場合、0pxが適用。)

たとえば、transform-origin: 100% 100%;とすると、x軸の位置を100%(左から100%の位置)、y軸の位置を100%(上から100%の位置)となり、要素の右下の点を起点として360度時計回りに回転されます。

transform-origin: 100% 100%;と指定している為 要素の右下の点を起点として360度時計回りに回転されている
※デフォルトでは中心(x方向に左から50%、y方向に上から50%)と指定されています。
 

transform-originの指定方法

要素の右下の点を基準に、要素を回転させている例
 

また、今回は%を使って値を指定していますが、他にも「px」といった単位や「left」「top」などといったキーワードを使用して起点となる座標を指定することも可能。

数値 + 単位 pxなどといった単位を使用して、座標を指定することが可能。
% 要素の横幅、高さを基準(100%)として、座標を指定することが可能。
left 起点のx座標を左端(0%)に指定。
right 起点のx座標を右端(100%)に指定。
top 起点のy座標を上端(0%)に指定。
bottom 起点のy座標を下端(100%)に指定。
center 起点のx、y座標を中央(50%)に指定。

デフォルトでは「transform-origin: 50% 50% 0」と指定されている為、x、y座標の中央位置を起点として回転するようになっています。

また例ではrotate()を使用しているデモを紹介しましたが、rotateX()、rotateY()の時も同様に回転の起点を変更することが可能です。

 

 

rotate()の実際の使用例

最後にrotate関数の実際の使用例をいくつか紹介しておきます。

他にも使用場面はいくつかありますが、今回紹介するのは以下の2つです。

■rotate()の実際の使用例

  1. ハンバーガーメニュー
  2. 吹き出し

 

1. ハンバーガーメニュー

1つ目は、ハンバーガーメニューです。

下記のハンバーガーメニューはクリック時に3本線がバツマークに変わるように実装されていますが、バツマークを作る際にrotate()を使用しています。

ハンバーガーメニューサンプル
 

 

2. 吹き出し

2つ目は、吹き出しです。吹き出しの三角形の部分を作るのにrotate関数が使用されています。

吹き出しのサンプル

 

 

まとめ 要素を回転させることができるrotate

まとめです。今回は要素を回転されることができるCSS関数、rotate()の使い方について紹介しました。

transform: rotateの指定方法

rotate()の引数に正の値、負の値を指定した場合の回転方向を解説している図

rotate関数は擬似クラス:hoverやtransitionプロパティ、@keyframesなどと組み合わせて使うことで簡単におしゃれな回転アニメーションを実装することが可能です。

ハンバーガーメニューでもよく使われるのでぜひ覚えておきましょう。

今回は以上になります。最後までご覧頂き、ありがとうございました。


 

「業者に任せたけど、更新ができない」「本で独学は時間がかかりすぎる・・」そんなお悩みの方も多いのではないでしょうか。

個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。
教室の無料事前相談もしておりますので、まずはお気軽にご登録ください。

詳細はこちら

YouTubeチャンネル開設しました!

WEBST8 YouTube Channel 開設
最大月間50万PVの当ブログをベースに、Youtube動画配信にてWordPress、ホームページ作成、ブログのことについてお役立ち情報を随時配信していきます。

ご興味ある方はぜひチャンネル登録をしていただけますと幸いです。


おすすめ記事3選

【WordPressの始め方総まとめ】ワードプレスブログの作り方9STEP

【おすすめレンタルサーバー比較総まとめ】WordPress対応5社

国内シェア上位のエックスサーバー、ロリポップ、さくらのレンタルサーバ、およびConoHa WING、mixhostを中心にWordPressおすすめレンタルサーバーを比較・紹介していきます。これからWordPressでホームページやブログを開設するためにレンタルサーバー選びを検討している方はこちらをご覧ください。

【WordPressの始め方総まとめ】ワードプレスブログの作り方9STEP

WordPressの始め方総まとめ

WordPress(ワードプレス)でブログを始めようと思った時に、サーバー・ドメインの手続きなどわからないことだらけで困っているというお悩みをお持ちの方も多いのではないでしょうか。本記事では、WordPressでブログやアフィリエイトを始めたい初心者を対象にWordPressの始め方をご紹介していきます。

【総まとめ】WordPress(ワードプレス)ホームページ作り方

【総まとめ】WordPress(ワードプレス)ホームページ作り方

WordPressでホームページを自作しようと思った際に、「ドメイン?サーバー?たくさん調べることがあって何から手をつけたら良いのかわからない」というかたも多いのではないでしょうか。この記事ではWordPress初心者の方を対象にWordPressでホームページを作る方法をご紹介していきます。

-CSS