こんにちは、ライターのナナミです！
最近のWEBサイトって色々と動きがあって面白いですよね。マウスオーバーしたら色が変わったり、くるっと回転させたり…
実は、そういう動きはCSSだけで作れちゃうんです！
今回はCSSだけで要素をくるっと回転させる方法に焦点を絞り、回転させるプロパティ、transform:rotate();についてを徹底解説していきます。
さらにrotate()を実践的に使うための応用編としてCSSだけでアニメーションをつける方法も解説していきますね。
今回の記事では、下記のHTMLとCSSを基本にして説明していきます。
HTML
回転させます
CSS
.rotate_test {
width: 100px;
background-color: #ccc;
padding: 78px 40px;
margin: 100px auto;
}
jQueryとかは難しくてよくわからないから、アニメーションなんて諦めていた…という人でも、CSSならとっても簡単です。
要素をくるっと回転させられるようになって、レイアウトの幅を広げていきましょう！
transform:rotate()とは？
transformは、要素の変形を指定できるCSSプロパティです。要素を拡大したり、位置を変えたりなど、値によって色々な変形を指定することができます。
rotate()は、要素の回転を指定するtransformの値です。
下記のように記述します。
transform:rotate(数値deg);
数値には回転角度が入ります。角度なので単位はdeg、英語のDegree（角度）を略したものです。
この数値はマイナスの値を入れることもできます。プラスの値で時計回り、マイナスの値で反時計回りに回転します。
例えば要素を時計回りに45度回転させたい場合は
CSS
.rotate_test {
transform:rotate(45deg); /* 中心を基準点に時計回りに回転する */
}
反時計回りに45度回転させたい場合は、
CSS
.rotate_test {
transform:rotate(-45deg); /* 中心を基準点に反時計回りに回転する */
}
となります。
基本はたったこれだけ、簡単ですね！
rotateの指定は他にもrotateXやrotateYなど、いくつかの種類があります。
ひとつひとつ見ていきましょう。
rotate(回転角度)
前項で説明した、一番基本的な指定です。要素の真ん中を基準に2D回転をします。
CSS
.rotate_test {
transform:rotate(45deg); /* 中心を基準点に回転する */
}
rotateX(回転角度)
X軸を軸として回転する指定です。
上下の真ん中、下記の図の赤い線の部分が軸になります。
実際に使ってみると…
CSS
.rotate_test {
transform:rotateX(180deg); /* 軸を基準点に回転する */
}
上下に反転しましたね！
イメージとしては、カードを縦方向に裏返しにするような感じです。
rotateY(回転角度)
Y軸を軸として回転する指定です。こちらは左右の真ん中が軸になります。
実際に使ってみると…
CSS
.rotate_test {
transform:rotateY(180deg); /* Y軸を基準点に回転する */
}
rotateXと違って、左右に反転しましたね。
カードを裏返しにする感じは変わらないのですが、回転する軸が違うのでこのような結果になります。
rotateZ(回転角度)
X,Yでは終わりません、Z軸！
これは立体的な軸、下記の図の位置を基準とします。
お気づきでしょうか？この軸を中心にするということは、要素の中心点を軸にするということです。
つまり、rotateZの動きはrotateと全く同じです。
CSS
.rotate_test {
transform:rotateZ(45deg); /* Z軸を基準点に回転する */
}
同じ結果になりましたね。
じゃあ別にZ軸とかいらないじゃん…と思った方も多いと思います。
しかし、次に説明するrotate3dを理解するには、Z軸の存在はとても重要です。
rotate3d(Xの数値,Yの数値,Zの数値,回転角度);
名前の通り、3Dの回転を指定できる関数です。
ざっくりいうと、X、Y、Zを一気に指定して、立体的な回転にすることができます。ここで前述のZが活きるわけですね！
CSS
.rotate_test {
transform:rotate3d(1,1,1,180deg);/* 最初の3つの数値で基準点を決めて回転する */
}
最初に3つの数値が並んでいますね。左からXの数値、Yの数値、Zの数値となります。ここの数値を総合して軸となる線を導き出しています。
さてどのように導き出しているか…という説明ですが、今回は割愛します。というのも、この関数を完璧に理解するためには、数学のベクトルの知識が必要になります。
文系の方の中には「ベクトル何それ美味しいの」という方も多いのではないでしょうか？
なので今回はざっくりと数値を総合して軸となる線を導き出していると思っていただければOKです。
逆に言えば、それを理解していれば問題なく使えるプロパティです。難しく考えず行きましょう！
きちんと数値の関係や軸の導き方を知りたい方は、下記のサイトなどを参考にしてみてください。
http://unformedbuilding.com/articles/learn-about-css-transforms/
最後の角度については、他の記述と同様です。数値の部分で導き出した線を軸に、何度回転させるかを指定しています。
立体的な動きは難しいように思われがちですが、実はCSSで簡単にできてしまうのです。
ジェネレーターを使おう
ベクトルとかよくわからないけど、もっと複雑な動きにしたい…
そんな時には、下記のようなジェネレーターを使うのがオススメです。
http://ds-overdesign.com/transform/rotate3d.html
数値を入れてみると、どのような動作をするかが一目でわかって、とても便利ですね。
さらにCSSも生成してくれるので、それをコピペするだけで設定完了です。
こういったツールは他にも色々あるので、どんどん活用していきましょう！
transform-origin:X軸の基準点の位置,Y軸の基準点の位置;
rotateでは、回転の軸となる部分は基本的に要素の真ん中です。
しかし、場合によっては軸をずらしたい時もあると思います。その軸を調整するのが、transform-originです。
X軸は左からの位置、Y軸は上からの位置となっています。単位はpxや％などを指定することができるので、必要に応じて指定しましょう。
例えばtransform-originを両方0％にして、rotateを指定すると…
CSS
.rotate_test {
transform: rotate(90deg); /* 回転 */
transform-origin: 0 0; /* 左から0％、上から0％離れた点を基準点にする */
}
左上の角を基準に回転しましたね。
両方100％にすると
CSS
.rotate_test {
transform: rotate(90deg); /* 回転 */
transform-origin: 100% 100%; /* 左から100％、上から100％離れた点を基準点にする */
}
右下の角を基準に回転します。
rotateXやYなどでも同じように軸をずらすことができます。
アニメーションをつけてみよう！
ここまで読んでいて、
と思った方もいるかもしれません。
rotateはひし形の要素を作るなどの出番はあるかと思いますが、rotateXやrotateYはこのままだとあまり出番はありません。
しかし、transformの醍醐味は画面上で動かすこと、すなわちアニメーションにあります。アニメーションをつけることで、rotateXやrotateYは、表現の幅を広げる大きな要素となるのです。
transformにアニメーションをつける方法は色々とありますが、今回はCSSのみで実装できる方法を2つご紹介します。
それぞれメリットデメリットがあるので、状況に応じて使い分けていきましょう。
transition
transitionは要素が変化する時間を指定できるプロパティです。
例えば下記のように書くと
CSS
.rotate_test {
transform: rotate(360deg); /* 回転 */
transition: 1s; /* 1秒かけて動く */
}
要素がくるっと時計回りに回転します。
これはtransitionで変化にかかる時間を増やしているからです。値の単位はSecond(秒)の頭文字をとって「s」となります。
transitionを指定していない状態とは、transition:0s;を指定している状態と同じです。
つまり、0秒で変化しているので、アニメーションにはなりません。
transitionを0以上で指定することで、変化する時間を増やすことができます。1秒や2秒にすることで、変化している過程も描写されるので、アニメーションになるのです。
擬似クラスを使う
単純にtransitionを指定するだけだと、CSSを読み込み終わったタイミングでアニメーションが動いてしまうので、汎用性が低い状態です。
そこで、擬似クラスを使って変化が起きる条件をつけます。
擬似クラスとは要素の状態などを指定できる記述です。マウスオーバーしている状態やフォームを入力しようとしている状態などを指定できるので、マウスオーバーしている時にはCSSを少し変えるなどの動きの条件をつけることができます。
使い方は簡単、要素を指定する際に、使いたい擬似クラスを後ろに記述するだけです。今回はマウスオーバー時を指定したいので、:hoverを付けます。
CSS
要素名:hover{
/* マウスオーバー時のCSS */
}
擬似クラスについてはこちらの記事が詳しく解説しています
http://www.phenomena.co.jp/blog/2017/03/29/css%E3%81%AE%E6%93%AC%E4%BC%BC%E3%82%AF%E3%83%A9%E3%82%B9link-visited-hover-active-focus%E3%81%AE%E4%BD%BF%E3%81%84%E6%96%B9/
擬似クラス:hoverを使って、マウスオーバーした時を条件にすると…
CSS
.rotate_test {
transition: 1s; /* 1秒かけて動く */
}
.rotate_test:hover {
transform: rotate(360deg); /* マウスオーバー時に回転 */
}
マウスオーバーした時に回転しましたね！
rotateXで実装すると
CSS
.rotate_test {
transition: 1s; /* 1秒かけて動く */
}
.rotate_test:hover {
transform: rotateX(180deg); /* マウスオーバー時に回転 */
}
カードを裏返したような動きがつけられました。シンプルなサイトでも、こうして動きがつくとリッチな感じになりますね！
ポイントは、:hoverをつけていない状態でtransitionを指定することです。
:hoverが付いている状態にtransitionを指定すると、マウスアウトした際に:hoverの条件が満たされなくなるのでtransitionもなくなってしまいます。
つまり、元に戻る時にアニメーションが起きなくなってしまうのです。
transitionは特に理由がなければ、擬似クラスがついていない状態で指定するようにするのがオススメです。
transitionのメリットとデメリット
メリット
- 実装がシンプルで簡単
デメリット
- 擬似クラスやjQueryによるクラスの変更・追加などをしないと、動作する条件を作れない
- 自動的に連続して動かし続けることはできないので、「要素をずっとくるくる回す」などの実装は不可
記述がシンプルで使いやすいのが魅力ですが、動きの自由度はそんなに高くないのが欠点ですね。マウスオーバー時のボタンの動きなど、そんなに複雑な動きを想定していない時にオススメの手法です。
animation
そんな時に使えるのがanimationです。
animationは、@keyframesというものと併せて使います。
それぞれの指定方法を見ていきましょう。
@keyframesを指定する
@keyframesはアニメーション開始から終了までの動きを指定するものです。
下記のように記述します。
CSS
@keyframes 任意の名前 {
0% {
/* CSSプロパティ:値; */
}
100% {
/* CSSプロパティ:値; */
}
}
任意の名前の部分には、アニメーションの名前を指定します。HTMLのIDのような感じですね。
パーセンテージはアニメーションの進み具合を表しています。0%ならアニメーション開始時、100%ならアニメーション終了時となります。
パーセンテージの後のカッコ内には、その時点でどのような状態になっているかをCSSで記述します。
例えば、「最初は要素が回転していない状態だけど、アニメーション終了時には360度回転している」という指定ならば
CSS
@keyframes rotate_anime {
0% {
transform:rotate(0deg);/* アニメーションの進みが0%の時の状態 */
}
100% {
transform:rotate(360deg);/* アニメーションの進みが100%の時の状態 */
}
}
と書けばOKです。
animationを指定する
@keyframesで動きの設定をするだけでは、アニメーションは動作しません。
開始から終了までの時間などを設定し、実際に動くようにするのがanimationです。
書き方はこんな感じです
各記述は半角スペースで空け、分けて記述していきます。
先ほどの@keyframesを1秒でアニメーションさせると…
CSS
.rotate_test {
animation:rotate_anime 1s;/* rotate_animeを1秒かけて実行する */
}
アニメーションが動作します。
animationをループするようにする
animationではアニメーションを数回繰り返したり、ループさせたりすることができます。
先ほどの記述にループの記述、infiniteを追加してみると…
CSS
.rotate_test {
animation: rotate_anime 1s infinite; /* rotate_animeを1秒かけて実行するのを繰り返す */
}
アニメーションが繰り返されるようになりましたね！このようにanimationは細かくアニメーションを設定できます。
animationのメリットとデメリット
メリット
- 動きの進み具合ごとに動きを指定できたり、ループの設定ができたりなど、細かい動きの設定ができる
デメリット
- 設定が複雑になりやすいので、あまり手軽ではない
細かく設定できるのは魅力ですが、その分扱いづらいところもあります。ただ、使いこなせばjQueryなしでもリッチな動きを作れる優れものです。
上記で説明したanimationの設定はまだまだほんの一部です。色々な動きを設定できるので、ぜひ試してみてください！
詳細はこちらの記事が詳しく説明してくれています。
https://qiita.com/7968/items/1d999354e00db53bcbd8
指定時の注意点
rotateはいろいろ使えて面白いプロパティですが、使う時にはちょっと気をつけたいポイントがあります。
元々の位置はそのまま残る
rotateで要素を回転させても、本来その要素が存在する場所はそのまま残ります。
例えば、テキストの途中に図が入っているような状態だと…
要素が回転する前にあった場所が残ってますね。
このように、レイアウトへの影響が出ることがあるので、よくチェックしながら実装しましょう。
display:inline;には効かない！
transformはdisplay:inline;となっている要素にはききません。
blockやinline-blockならば問題ないので「あれ？回転しない…」と思ったら、要素にdisplay:block;やdisplay:inline-block;を指定してみましょう。
古いブラウザにはベンダープレフィックスが必要
ベンダープレフィックスとは、一部の新しい機能を使うために必要になることがある記述です。
CSSには、実装する予定だけれど、まだ草案段階の機能が色々とあります。そんな機能を使えたり使えなかったりすると不便ですよね。
なので各ブラウザは草案段階の機能を先行実装して使えるようにしています。その際に「これは草案段階の機能ですよ」というのを明示し、機能を使えるようにするのが、ベンダープレフィックスです。
下記のように、プロパティ名の前に-moz-や-webkit-と記述します。
-ms-transform:rotate(360deg);
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
ベンダープレフィックスについての詳細はこちらの記事が詳しく解説しています。
http://scene-live.com/page.php?page=43
では「rotateにはベンダープレフィックスをつけなければいけないのか」というと、基本的には必要ないです。
現在の最新ブラウザや、Microsoftがサポートを継続しているブラウザでは、ベンダープレフィックスなしで問題なく動作します。
ただし、IE9など古いブラウザへの対応が必要な場合には、ベンダープレフィックスが必要になるかもしれません。
作っているサイトはどのブラウザまでサポートするのかを加味し、必要であればつけるようにしましょう。
まとめ
いかがでしたか？
要素の回転だけではあまり汎用性はないように思えますが、アニメーションと組み合わせると色々な場面で活躍できそうですね。
今回はくるっと回転させる方法でしたが、横に動かしたり、色を変えたり、大きさを変えたり…
CSSのみで実装できるアニメーションはまだまだたくさんあります。
是非どんどん試して、素敵なWEBサイトを作ってください！
