WEBサイトを作成する際に、ユーザーの操作やUIのデザインに合わせて文字や画像を回転させるアニメーションをしたいという要望が出てくることも時にはあります。
そういったケースに対応するため、CSSには要素を回転させる 「rotate」 という関数が用意されています。
今回は、このrotate関数の使い方について詳しく解説していきたいと思います！
CSSのrotate関数とは？
CSSのrotate関数とは、点や軸を基準に要素を回転させることができる関数です。
プロパティではなく関数のため、要素を変形・移動するtransformプロパティの値として使用します。
rotateにはそれぞれ、X軸、Y軸、Z軸に対しての回転が用意されており、組み合わせ方によって様々な動きの回転動作を実装することができます。
rotate()関数の使い方
それでは、rotate関数の使い方について詳しく見ていきましょう。
今回の記事では、下記のHTMLとCSSをベースに説明していきます。
【基本となるHTML】
<body>
<div class="sampleRotate">サンプル</div>
</body>【基本となるCSS】
body {
display: flex;
height: 220px;
margin: 0;
}
.sampleRotate {
width: 150px;
height:150px;
text-align: center;
justify-content: center;
align-content: center;
color: #ffffff;
background-color: #008080;
margin: auto;
}【サンプル表示結果】
transform: rotate()の基本構文
transform プロパティで rotate 関数を使用する場合は、以下のように記述します。
【基本構文】
transform: rotate(角度);角度を指定するので、単位は 「deg」、「turn」、「rad」 のいずれかを使用します。
360度の基準で指定したい場合は deg を使用しましょう。
数値にはマイナスの値を指定することもでき、プラスの場合には時計回り、マイナスの場合には反時計回りに回転します。
【サンプルCSS】
.sampleRotate {
width: 150px;
height:150px;
text-align: center;
justify-content: center;
align-content: center;
color: #ffffff;
background-color: #008080;
transform: rotate(45deg);
}【表示結果】
回転方向に応じたrotate()関数のバリエーション
rotate関数のバリエーションとして、回転する方向を一つの回転軸に定める「rotateX」 や 「rotateY」 など、いくつかの種類があります。
1つずつ順に見ていきましょう。
【基本形】rotate()
一番基本的な形の rotate関数です。要素の中心に時計回り、または反時計周りに回転します。
【サンプルCSS】
.sampleRotate {
width: 150px;
height:150px;
text-align: center;
color: #ffffff;
background-color: #008080;
transform: rotate(-90deg);
}【表示結果】
【X軸回転】rotateX()
rotateX は、X軸（横軸）を基準に回転する関数です。
回転の向きとしては、上辺位置から下辺位置へ、あるいは下辺位置から上辺位置へと縦方向に回転します。
【サンプルCSS】
.sampleRotateX {
width: 150px;
height:150px;
text-align: center;
color: #ffffff;
background-color: #008080;
transform: rotateX(180deg);
}【表示結果】
【Y軸回転】rotateY()
rotateY は、Y軸（縦軸）を基準に回転する関数です。
こちらは、右辺位置から左辺位置、あるいは左辺位置から右辺位置へと横方向に回転します。
【サンプルCSS】
.sampleRotateY {
width: 150px;
height: 150px;
text-align: center;
justify-content: center;
align-content: center;
color: #ffffff;
background-color: #008080;
transform: rotateY(180deg);
}【表示結果】
【Z軸回転】rotateZ()
rotateZ関数は、Z軸（奥行き）を基準に回転する関数です。
ただし、Z軸は主に立体（3次元）での座標を表す軸なので、rotateZ関数のみで使用する場合は rotate関数と同様の動きをします。
【サンプルCSS】
.sampleRotateZ {
width: 150px;
height:150px;
text-align: center;
justify-content: center;
align-content: center;
color: #ffffff;
background-color: #008080;
margin: auto;
transform: rotateZ(45deg);
}【表示結果】
要素を3Dで回転させるrotate3d()関数
先ほど説明したZ軸が有効に働くのが、3D軸での回転を指定できる 「rotate3d」関数です。
X軸、Y軸、Z軸それぞれの数値と、回転する角度をまとめて指定し、要素を立体的に回転させることができます。
rotate3d関数を使用する際は、以下のように記述します。
【基本構文】
transform: rotate3d(X軸, Y軸, Z軸, 角度);【サンプルCSS】
.sampleRotate3d {
width: 150px;
height:150px;
text-align: center;
justify-content: center;
align-content: center;
color: #ffffff;
background-color: #008080;
margin: auto;
transform: rotate3d(0.5, 1, 0.5, 45deg);
}【表示結果】
X, Y, Z軸の回転を組み合わせることで複雑な回転を表現することができます。
後述する回転アニメーションの実装方法を利用すれば、さらにリッチな表現が実現できます。
transform-originプロパティで回転の基準点を指定する
rotate関数では基本的に、要素の中心を基準点として回転を行いますが、この基準点の位置をずらして回転させることもできます。
中心以外の場所を基準点にしたい場合は、transform-origin プロパティを使用して位置の指定を行いましょう。
transform-origin プロパティでは、基準点の位置となる座標をそれぞれ x、y、z の順に半角スペースで区切って指定します。
座標の指定は主にパーセンテージ (%) で行うか、または px などの単位付きの数値で指定することができます。
x と y 座標については、以下のキーワードを組み合わせて指定することも可能です。
- left …… x座標を 0%（左端）に設定します。
- right …… x座標を 100%（右端）に設定します。
- top …… y座標を 0%（上端）に設定します。
- bottom …… y座標を 100%（下端）に設定します。
- center …… x、y座標を 50%（中央）に設定します。
【サンプルCSS】
.sampleRotatePivot {
width: 150px;
height:150px;
text-align: center;
justify-content: center;
align-content: center;
color: #ffffff;
background-color: #008080;
margin: auto;
transform-origin: left top;
transform: rotate(90deg);
}【表示結果】
このままだと分かりづらいですが、サンプルのボックスはもともとの位置から要素の左上を起点にして90度回転しています。
なお、z座標については単位付きの数値でのみ指定が可能です。z座標の値を省略した場合は0pxが適用されます。
【応用】要素の回転をアニメーションさせる
rotate関数は、アニメーション効果との相性が良い関数でもあります。
ただの静止画ではなく動きを付けることで、表現の幅を大きく広げることができます。
アニメーションを付ける方法はいくつかありますが、今回はCSSのみで実装できる2つの方法について紹介していきたいと思います。
transitionプロパティでアニメーションを作る
回転アニメーションを実装する１つめの方法は、transition プロパティを使用するやり方です。
transition プロパティは、要素がある状態から別の状態へと変化するまでにかかる時間を指定できるプロパティです。
このプロパティを使用することで、初めから回転した状態で表示するのではなく、動的に変化させることができます。
例えば、下記のようにコードを記述すると、1秒間かけて要素が回転するアニメーションを作ることができます。
【サンプルCSS】
.sampleRotateTrans {
width: 150px;
height:150px;
text-align: center;
color: #ffffff;
background-color: #008080;
transition: 1s;
transform: rotate(360deg);
}【表示結果】
ただし、上記のように transitionプロパティを指定すると、CSSの読み込みが終わったタイミングですぐにアニメーションが動いてしまいます。（この文章が出ているところでページを再読み込みすると、ページが読み込まれた直後にアニメーションしていることが分かります）
例えばマウスオーバーなど、何かのトリガーをきっかけにアニメーションを開始したい場合は、次のように擬似クラス内で rotate 関数を使用するようにしましょう。
【サンプルCSS】
.sampleRotateTrans {
width: 150px;
height:150px;
text-align: center;
color: #ffffff;
background-color: #008080;
transition: 1s;
}
.sampleRotateTrans:hover {
transform: rotate(360deg);
}【表示結果】
疑似クラスの :hover を付けたことで、マウスオーバーで回転がかかるようになりました。
animationプロパティでアニメーションを作る
transitionプロパティは、2つの状態間の変化を指定するプロパティのため、複数の状態を挟むような複雑な動きのアニメーションを作成することはできません。
より詳細に動きを指定したい場合には、animationプロパティを使用しましょう。
animationプロパティを使用する際は、以下のように記述します。
【基本構文】
animation: キーフレーム名 秒数 遅延時間;キーフレームは、アニメーションがどのように変化するかを定義するための構文のことを言います。
animationプロパティでキーフレームを指定することで、記述した内容のアニメーションを実行することができます。
@keyframesでアニメーションのキーフレームを設定する
animationプロパティを使用する際に必ず必要になるのが、キーフレームです。
キーフレームでアニメーションの動作を指定するには、次のように構文を記述します。
【基本構文】
@keyframes rotateAnimate {
0% {
/* CSSプロパティ:値; */
}
100% {
/* CSSプロパティ:値; */
}
}0%が開始時点、100%が終了時点です。
状態をさらに細かく分けたい場合には、同じように進行度合いをパーセンテージで指定してから、それぞれの状態を記述します。
また、「0~100%」 は 「from~to」 と指定しても同じ動きになります。
【基本構文バリエーション】
@keyframes rotateAnimate {
from {
/* CSSプロパティ:値; */
}
to {
/* CSSプロパティ:値; */
}
}実際に使用する場合のサンプルコードは、以下の通りです。
【サンプルCSS】
.sampleRotateAnimate {
width: 150px;
height: 150px;
text-align: center;
color: #ffffff;
background-color: #008080;
animation: rotateAnimate 3s 0.5s;
}
@keyframes rotateAnimate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}【表示結果】
上の表示結果ではマウスカーソルをボックスの位置に置くとアニメーションが始まります。
間に複数状態を挟むことで、より複雑な動きにすることも可能です。
また、animationプロパティの場合にはループ回数を指定することもできます。
【ループ回数を指定する場合の@keyframesの例】
@keyframes rotateAnimate {
0% {
transform: rotate(0deg);
}
30% {
transform: rotate(270deg);
}
60% {
transform: rotate(90deg);
}
100% {
transform: rotate(360deg);
}
}【表示結果】（マウスオーバーで動きます）
rotate()を使用する際の注意点
要素の表示位置を変更したり、アニメーションの動きに適用したりと、様々な場面で活用できる便利な rotate関数ですが、使用の際にはいくつか注意するべき点があります。
回転前の要素の配置がそのまま残る
これまでのコードはあくまでサンプルのため、シンプルなレイアウトのみで動作を見てきましたが、実際のWebサイトでは様々な要素が画面上に配置されています。
ですが、rotate関数を使用した際に、回転に合わせて要素の配置が自動で調整されるわけではありません。
そのため、回転後の位置を考慮せずに要素を配置してしまうと、互いに重なり合ったり、余計な空白が生まれたりと、レイアウトに影響が出る可能性があります。
例えば以下の画像は、回転させる要素のすぐ隣にテキストを配置してしまったために、文字の一部に要素が被ってしまったレイアウトの一例です。
【回転前】
テキストテキストテキストテキスト
テキストテキストテキストテキスト
【回転後】
テキストテキストテキストテキスト
テキストテキストテキストテキスト
rotate関数を使用する場合は、各要素の位置に気を付けながらレイアウトを調整しましょう。
インライン要素には効かない
rotate関数の使用時に使う transformプロパティですが、span や aタグなどのインライン要素には適用させることができません。（ただし、img は除きます）
以下の例では、spanタグに対して transformプロパティを使用し、要素を回転させようとしていますが、実行結果には rotate関数の値が適用されていません。
【HTML】
<div class="sampleRotate">
<span>サンプル</span>
</div>【CSS】
.sampleRotateSpan {
transform: rotate(45deg);
}【表示結果】
インライン要素に対して使用したい場合にはdivタグで囲うか、display: block; や display: inline-block; を指定してブロック要素かインラインブロック要素のどちらかに変更するようにしましょう。
【サンプルCSS】
.sampleRotate span {
display:inline-block;
transform: rotate(45deg);
}【表示結果】
古いブラウザへの対応は追加の記述が必要
現在においては基本的に意識する必要のないポイントですが、transformプロパティはCSS3で追加された仕様のため、一部の古いブラウザでは認識できなかったり、認識するためにはプロパティ名にベンダープレフィックスを付けなければならない場合があります。
ベンダープレフィックスとは、ブラウザで標準化されていない非標準のCSSプロパティを使用する場合に、プロパティ名の先頭に追加することで機能が利用できるようになる記述方法です。
ベンダープレフィックスが必要なブラウザと、使用するベンダープレフィックスはそれぞれ以下の通りです。
| Webブラウザのバージョン | ベンダープレフィックス |
|---|---|
| Firefox 3.5～15 | -moz- |
| Chrome 35以下 | -webkit- |
| Safari 8以下 | -webkit- |
| Opera 10.5～12 | -o- |
| Opera 15～22 | -webkit- |
| IE9～IE11 | -ms- |
使用する際は、以下のように記述します。
-moz-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);まとめ
いかがでしたか？今回の記事では、rotate関数の使い方について解説をしました。
要素のレイアウト配置やアニメーションの作成において、rotate関数はとても有効な機能の1つです。
使い慣れない間は、実現したい位置や動きを指定するのに少々戸惑うこともあるかもしれませんが、WebサイトのUIの表現の幅を広げる手法として非常に有用です。
ぜひコードを実際に試したりしながら、Webサイト作成に活用してみてくださいね！
HTML/CSSの学習方法は？
書籍やインターネットで学習する方法があります。昨今では、YouTubeなどの動画サイトやエンジニアのコミュニティサイトなども充実していて多くの情報が手に入ります。
そして、より効率的に知識・スキルを習得するには、知識をつけながら実際に手を動かしてみるなど、インプットとアウトプットを繰り返していくことが重要です。特に独学の場合は、有識者に質問ができたりフィードバックをもらえるような環境があると、理解度が深まるでしょう。
ただ、HTML/CSSに限らず、ITスキルを身につける際、どうしても課題にぶつかってしまうことはありますよね。特に独学だと、わからない部分をプロに質問できる機会を確保しにくく、モチベーションが続きにくいという側面があります。独学でモチベーションを維持する自信がない人にはプログラミングスクールという手もあります。費用は掛かりますが、その分スキルを身につけやすいです。しっかりと知識・スキルを習得して実践に活かしたいという人はプログラミングスクールがおすすめです。
プログラミングスクールならテックマニアがおすすめ！
ITスキル需要の高まりとともにプログラミングスクールも増えました。しかし、どのスクールに通うべきか迷ってしまう人もいるでしょう。そんな方にはテックマニアをおすすめします！これまで多くのITエンジニアを育成・輩出してきたテックマニアでもプログラミングスクールを開講しています。
＜テックマニアの特徴＞
・たしかな育成実績と親身な教育 ～セカンドキャリアを全力支援～
・講師が現役エンジニア ～“本当”の開発ノウハウを直に学べる～
・専属講師が学習を徹底サポート ～「わからない」を徹底解決～
・実務ベースでスキルを習得 ～実践的な凝縮カリキュラム～
このような特徴を持つテックマニアはITエンジニアのスタートラインとして最適です。
話を聞きたい・詳しく知りたいという方はこちらからお気軽にお問い合わせください。
HTML/CSSの関連記事
- HTML/CSSとは？関係性や書き方
- HTMLとは？
- HTML頻出タグ一覧
- HTMLで表を作成する方法
- HTMLで文字色を指定する方法
- HTMLでフォントサイズを指定する方法
- HTMLで画像リンクを貼る方法
- HTMLのtableでborder（枠線）を設定する方法
- CSSとは？メリットや基本的な書き方
- CSSで縦書きする方法
- CSSでborder（枠線）を設定する方法
- 【コピペ可】CSS見出しデザイン30選
- CSSのmarginやpaddingで余白指定
- 擬似要素とは？::beforeや::afterの使い方
- 改行ルールの設定方法
- HTMLにCSSをstyleで直書きする方法
- 表（テーブル）のデザイン方法
- CSSで背景画像を指定する方法
- CSS floatプロパティとは？
- HTML要素を横並びにするCSSの新定番「flexbox」とは？
- 要素を好きな位置に配置する「position:absolute;」とは？
- 主軸方向に対する配置を指定する「justify-content」
- テキストや画像の水平方向の配置を指定する「text-align」
- テキストや画像の縦方向の位置を指定する「vertical-align」
- テキストを装飾する「text-decoration」
- 色を指定する「color」
- コンテンツのはみ出しを管理する「overflow」
- フォントを指定する「font-family」
- 文字の太さを指定する「font-weight」
- 字間を調整する「letter-spacing」
- 要素に丸みをつける「border-radius」
- 行間を調節する「line-height」
- 要素や画像に影をつける「box-shadow」
- display:inline、display:block、display:inline-blockの違い
- CSSフレームワーク「Bootstrap」とは？
