記事・特集リスト
無料お役立ち資料
本サイトについて
お問い合わせ
閉じる

CSSで回転させる方法【サンプルコード付き】(初心者向け)

初心者の方向けにcssで要素を回転させる方法を紹介。 「transform:rotateで回転を作る方法」「transform:rotateにtransitionを加えて動きを作る方法」「transform:rotateにanimationを加えて動きを作る方法」をサンプルコード付きで詳しく解説。

カテゴリ: HTML/CSS

こんにちは!
最近、WEB制作をはじめ少したったけど、「回転を加えWEBサイトを作成したい・・!」「回転に動きをつけて動きのあるWEBサイトを作成したい・・!」
そんな風に考えている、初心者WEB製作者の方も多いのではないでしょうか?

今回は初心者WEB制作の方向けに「transform:rotateで回転を作る方法」「transform:rotateにtransitionを加えて動きを作る方法」「transform:rotateにanimationを加えて動きを作る方法」を中心に解説します。

CSSで回転させるには?

CSSで要素を回転させるには、CSSの「transform」プロパティ「rotate」を使用します。
「transform」は要素の変形を指定できるプロパティで、要素の移動、回転、縮小、傾斜などの変形を加える事ができます。
「rotate」は要素の回転表示を指定します。

(数値deg)で回転角度を指定する事ができます。 今回は、回転について解説していきますが、「transform」には回転以外の変化も指定できます。
下記にて紹介します。

transformで指定できる値説明
rotate回転を指定できる
scale拡大縮小を指定できる
translate移動を指定できる値
skew歪みを指定できる値

transform:rotateの使い方をサンプルコードで解説

transform:rotateの基本記述。

transform:rotate(数値deg)で数値に回転角度を入れ、指定する事ができます。
rotateに指定できる値は下記の5点です。
順番にサンプルコードで解説していきます。

rotateで指定できる値説明
rotate(回転角度)角度によって2D回転を指定する
rotateX(回転角度)X軸を軸とする角度によって時計回りの回転を指定する
rotateY(回転角度Y軸を軸とする角度によって時計回りの回転を指定する
rotateZ(回転角度)Z軸を軸とする角度によって時計回りの回転指定をする
rotate3d(回転角度X軸、Y軸、Z軸の回転を一括で指定し指定した回転をする

●【解説用】四角形 サンプルコード
本記事では、下記コードを解説用【共通四角形】として使用し解説します。

HTMLサンプルコード

CSSサンプルコード

rotate(回転角度)

真ん中を基準に2D回転します。 サンプルコード表示結果

CSSサンプルコード(共通サンプルコードに追加)

※解説
真ん中を中心に45°回転しています。

マイナス方向(半時計周り)にも変化を加える事ができます。
サンプルコード表示結果(共通サンプルコードに追加)

CSSサンプルコード(共通サンプルコードに追加)

※解説 真ん中を中心に反時計回りに45°回転しています。

rotateX(回転角度)

X軸を軸とする角度によって時計回りの回転をする

CSSサンプルコード(共通サンプルコードに追加)

rotateY(回転角度)

Y軸を軸とする角度によって時計回りの回転を指定する

CSSサンプルコード(共通サンプルコードに追加)

rotateZ(回転角度)

Z軸を軸とする角度によって時計回りの回転をする
サンプルコード表示結果

CSSサンプルコード(共通サンプルコードに追加)

rotateZとrotate()では単体での指定は同じですが、XYZの3点を指定する事により、Zの意味合いがでます。
下記より解説します。

rotate3d(回転角度)

X軸、Y軸、Z軸で指定した数値を総合して軸となる線を導き出す。
サンプルコード表示結果

CSSサンプルコード(共通サンプルコードに追加)

※解説
X軸、Y軸、Z軸で指定した数値を総合して軸となる線を導き出しています。

transform-origin

transform-originプロパティは、変化させる要素の中心点の位置を指定する事ができます。 transform-originプロパティ値は、数値(%)かキーワードのどちらかで指定する事ができます。

数値 (%、パーセント)説明(位置)
50% 50%真ん中 初期値
0% 0%左上
100% 100%右下
キーワード説明(位置)
left中心点のX軸を0%(左端)に指定
center中心点のX軸、Y軸を50%(中央)に指定
right中心点のX軸を100%(右端)に指定
top中心点のY軸を0%(上端)に指定
bottom中心点のY軸を100%(下端)に指定

サンプルコードで解説していきます。
●transform-origin 0% 0% (パーセント)
基準点を左上(0%0%)に指定する事で左上を基準に時計回りします。
サンプルコードで45度回転させてみます。
サンプルコード表示結果

CSSサンプルコード(共通サンプルコードに追加)

※解説
左上を基準に回転しています。

●transform-origin bottom right(キーワード)
基準点を右下(bottom right)に指定する事で右下を基準に時計回りします。
サンプルコード表示結果

CSSサンプルコード(共通サンプルコードに追加)

※解説
右下を基準に回転しています。

中心点の位置を指定するには、%にしてもキーワードにしてもX、Y軸の位置をtransform-originプロパティで指定し変更します。
Z軸も、%のみの指定で変更できますが、何も入力がなければ0pxが適用されます。

ここまでが「transform:rotate」の基礎的な説明でした。
ここから回転にアニメーションで動きをつけることで下記のように、動くWEBサイトを作成する事ができます。

アニメーションについて

まずは簡単にアニメーションの解説をさせていただきます。
わかる方は読み飛ばして下さい。

アニメーションとは、下記のように動きをつけれる機能のことです。
回転に動きをつける事で、初めて動きのあるWEBサイトを作成する事ができます。

アニメーション↓
CSSで回転

javascript不要で、CSSだけで動きをつけることがき、初心者の方も簡単に使う事ができます。
アニメーションを作成する方法は、「transition」「animation」の2通りあります。
transition最大の特徴は「変化のタイミングは1回のみ(hover、マウスオーバーなど)」
animation最大の特徴は「変化のタイミングを指定でき、細かい設定ができる」
簡単だけど、細かい設定をできないのが「transition」少し難しいけど、細かい設定をできるのが「animation」という事になります。

transition

transitionの特徴は「変化のタイミングは1回のみ(hover、マウスオーバーなど)」ですが、変化にかかる時間、速度、開始時間などを指定する事ができます。
サンプルコードで解説していきます

3秒かけて回転する四角形

「transition」プロパティに3sを指定し3秒かけて四角形を変化させます。

サンプルコード表示結果

CSSサンプルコード(共通サンプルコードに追加)

※解説
変化させたい要素に「transition」を指定し時間を指定する事で、変化にかける時間を指定する事ができます。
変化にかける時間を下記のように指定する事ができます。

●transitionで指定できる値(変化にかかる時間)

指定できる単位日本語単位 指定の仕方
s 1s1秒。初期値は0s
msミリ秒1000msで1秒

マウスオーバー時に四角形を回転

:hover擬似要素を指定し、マウスオーバー時に要素を回転させる。

サンプルコード表示結果(マウスオーバー時変化)↓
CSSで回転

CSSサンプルコード(共通サンプルコードに追加)

※解説
変化させたい要素(青色四角形)に「transition」「変化にかける時間」指定→マウスオーバー(:hover)した時に変化させたいtransform: rorate(回転)を指定する事で要素を変化させる事ができます。

マウスオーバー時に四角形をX方向に回転

:hover擬似要素を指定し、マウスオーバー時に要素をX回転させる。

サンプルコード表示結果(マウスオーバー時変化)↓
CSSで回転

CSSサンプルコード(共通サンプルコードに追加)

※解説
変化させたい要素(青色四角形)に「transition」「変化にかける時間」指定→マウスオーバー(:hover)した時に変化させたいtransform: rorateX(X回転)を指定する事で要素を変化させる事ができます。

マウスオーバー時に四角形をY方向に回転

:hover擬似要素を指定し、マウスオーバー時に要素をY回転させる。

サンプルコード表示結果(マウスオーバー時変化)↓
CSSで回転

CSSサンプルコード(共通サンプルコードに追加)

※解説
変化させたい要素(青色四角形)に「transition」「変化にかける時間」指定→マウスオーバー(:hover)した時に変化させたいtransform: rorateY(Y回転)を指定する事で要素を変化させる事ができます。

transitionで変化の速度を指定

transitionは、変化の速度を指定する事ができます。
下記の表の通りです。
今回は、サンプルコードで「ease-in」を指定します。

プロパティ 速度
easeゆっくり始まって、ゆっくり終わる
ease-inゆっくり始まる
ease-outゆっくり終わる
ease-in-outeaseよりゆっくり始まって、ゆっくり終わる
linear一定の速度で始まって終わる
steps(n)nの回数だけコマ送りする
サンプルコード表示結果(マウスオーバー時変化)↓
CSSで回転

CSSサンプルコード(共通サンプルコードに追加)

マウスオーバー時、「ease-in」を指定することで変化の始まりをゆっくりに指定する事ができています。
指定場所は、変化にかける時間の前、(今回は3s)になります。

transitionで変化の開始時間を指定

transitionには変化の開始時間を指定する「transition-delay」プロパティがあります。
下記はマウスオーバーしてから1秒後に変化が始まるように指定

サンプルコード表示結果(マウスオーバー時変化)↓
CSSで回転

CSSサンプルコード(共通サンプルコードに追加)

●「transition-delay」で指定できる値

指定できる単位日本語単位 指定の仕方
s 1s1秒。初期値は0s
msミリ秒1000msで1秒

transitionのメリット・デメリット

●メリット
簡単に実装する事ができ、アニメーション初心者には分かりやすく向いている。

●デメリット
細かい設定はできない(アニメーションのループや自動再生)

animation

animation最大の特徴は「変化のタイミングを指定でき、細かい設定ができる」ここがtransitionとの大きな違いです。
下記アニメーションは、マウスオーバーしなくても、回転が自動で繰り返されています。

サンプルコード表示結果↓
CSSで回転

CSSサンプルコード(共通サンプルコードに追加)

※解説
animationは「keyframe」で動きを決めます。

上記がkeyframeの基本的な記述方法です。

順番に解説していきます。

@keyframes 〇〇→〇〇に指定した名前、今回の例では「example」を指定したので「example」記入
進行度は、アニメーションがどれだけ進んでいるかを表し、0%でまだ始まってない状態、100%で完了した状態になります。

0%は「回転角度0」

100%時の変化は「360°回転」を指定しkeyframesの設定(animationの動き方の設定)をする。

次にkeyframesで指定した、animationを指定します、アニメーションを指定するには、
animation : keyflameの名前(今回はexample)変化時間、繰り返しinfinite(無限繰り返し)を指定

これでanimationとtransform: rorateを組み合わせ変化を作る事ができています。

アニメーションで指定できる値・プロパティ

●animationで指定できる値(変化にかかる時間)
animationには変化にかかる時間を指定することができます。
今回の例では3秒かけて変化させました。

指定できる値としては、下記となります。

指定できる単位日本語単位 指定の仕方
s 1s1秒。初期値は0s
msミリ秒1000msで1秒

animationで指定できるプロパティ(速度)

animationには変化の速度を指定するプロパティがあります。
指定する際は、変化にかける時間の前に指定します。今回は「ease-in」を記述してみます。
速度を指定するサンプルコード

指定できるプロパティの例としては下記となります

プロパティ 速度
easeゆっくり始まって、ゆっくり終わる
ease-inゆっくり始まる
ease-outゆっくり終わる
ease-in-outeaseよりゆっくり始まって、ゆっくり終わる
linear一定の速度で始まって終わる
steps(n)nの回数だけコマ送りする

animationで指定できる値(変化の開始時間)

animationで変化開始時間を指定する事ができます。
今回は1sを指定してみます。
指定方法は、変化時間の前に記述してください。上記例だと3s(変化時間)の前。

変化の開始を指定するサンプルコード

animationで指定できる値(回数・ループ指定)

animationでは再生回数を指定する事ができます。
1→(初期値)、infinite→無限ループ

animation回転サンプルコード

ここからは、コピペで使える、円の回転サンプルコードを紹介します。
これまでのサンプルコードとは違い、新しいサンプルコードを使用していきます。

transition(マウスオーバー時に円をY方向に回転させる)

サンプルコード表示結果(マウスオーバー時回転)↓
CSSで回転

HTMLサンプルコード

CSSサンプルコード

transition(マウスオーバー時に円をX方向に回転させる)

サンプルコード表示結果↓
CSSで回転

CSSサンプルコード

animation(円をY方向に回転させる)

サンプルコード表示結果↓
CSSで回転

CSSサンプルコード

animation(円をX方向に回転させる)

サンプルコード表示結果↓
CSSで回転

CSSサンプルコード

画像を回転

サンプルコード表示結果↓

HTMLサンプルコード

CSSサンプルコード

※解説
画像も回転を指定する事ができます。
ご自身で画像を用意しサンプルコードの「img src=””」の箇所に画像を入れみて下さい。

まとめ

今回は、WEB制作初心者の方向けに「transform:rotateで回転を作る方法」「transform:rotateにtransitionを加えて動きを作る方法」「transform:rotateにanimationを加えて動きを作る方法」を中心に解説してきました。

1.CSSで回転させるには、CSSの「transform」プロパティ「rotate」を使用する。

2.rotateで指定できる値は5点
①rotate(回転角度) →角度によって2D回転を指定
②rotateX(回転角度)→X軸を軸とする角度によって時計回りの回転をする
③rotateY(回転角度)→Y軸を軸とする角度によって時計回りの回転を指定する
④rotateZ(回転角度)→Z軸を軸とする角度によって時計回りの回転をする
⑤rotate3d(回転角度)→X軸、Y軸、Z軸の回転を一括で指定し指定した回転をする

3.transform:rotateにtransitionを加え回転の動きをつける。
transitionの特徴は「変化のタイミングは1回のみ(hover、マウスオーバーなど)、細かい指定はできないが、簡単に設定する事ができる」 

4.transform:rotateにanimationを加え回転の動きをつける。
animation最大の特徴は「変化のタイミングを指定でき、細かい設定ができるが、設定が少し複雑」

5.円、画像を回転させた、コピペで使えるサンプルコードを紹介

いかがだったでしょうか?
WEBサイトで動きをつける事ができると、初心者から一歩抜け出す事ができるでしょう。本記事を参考にして頂けたら幸いです。

最後までお読みいただきましてありがとうございます。ご意見・ご要望などございましたら、
以下のフォームよりお問い合わせを受けつけておりますので、よろしければご利用ください。

この記事がお役に立ちましたら、"いいね!"をお願いします
minwebの最新情報をお届けします

minweb編集部(株)セルリア

”共に考え、共に創るWebの成功戦略”というスローガンのもと、お客様と一からWeb戦略を考え、
企画し実装まで支援する伴走型Webコンサルティング会社です。

こちらの記事をお読みのかたにおすすめ!完全無料のダウンロード資料

Googleアナリティクス使い倒し活用術  <AKAHON>

ダウンロード資料画像

「毎日、数値をみているけどどこをどうやって改善すれば良いのかわからない」

「Google analyticsを導入して、自社サイトのパフォーマンスを上げて欲しいといわれたけど、何をどうすればいいのかわからない」

「Web以外にも担当を兼任していて、アクセス解析に多くの時間をついやすことができない」

上記のような思いをお持ちのWeb担当者の方にはお役に立てる一冊です。

Googleアナリティクス初心者の方でも使いこなせるように、導入方法や用語、やっておきたい初期設定から具体的な活用方法まで丁寧に解説します。