回転するロゴの作り方

2016.10.09 自習室 0
回転するロゴの作り方

このサイトで使用している、回転するロゴの作り方です。
CSS3のtransformを使用してキューブを作り、それをアニメーションで回転させています。

「キューブ 回転 CSS3」などで検索すると色んなサイトが見つかると思いますが、今回は以下のサイトを参考にしました。

http://www.the-art-of-web.com/css/3d-transforms/

このサイトのコードをそのままコピペして、大きさなどを調節すれば基本的にはうまくいくと思います。もしうまくいかなければ、以下の説明を参考にしてみてください。

キューブの作り方

キューブはCSS3のrotateを使用して作成します。

まずはわかりやすいように2面だけ使用して説明していきます。面の大きさは縦、横ともに40pxで作っていきます。

※コードを簡潔にするため、ベンダープレフィックスはつけていません。そのためスマホ等、一部ブラウザでは以下のコードではきちんと動作しない可能性があります。

See the Pen cube01 by tama (@tamalab) on CodePen.dark

同じ大きさの面を2つ作り、2つ目の面(.face2)のみ”transform: rotateY(45deg);”を指定し、45度Y軸に沿って回転させています。

これをキューブ状にするために、まず”.cubespinner div”に”position:absolute”を設定します。これで”.cubespinner”の子要素であるdiv要素がすべて重なるようになります。

See the Pen cube02 by tama (@tamalab) on CodePen.dark

次に、”.cubespinner”に”transform-style: preserve-3d;”を指定し、子要素を3D空間に配置できるようにします。

さらに”.face1″”.face2″に”transform: translateZ(20px)”を指定し、キューブの大きさの半分、z軸方向に面を移動します。この状態で”.cubespinner”に回転の中心を”transform-origin: 20px 20px 0;”のように指定して”.face2″を回転させると、以下のようになります。(分かりやすいように斜め上からの視点でアニメーションさせています)

See the Pen cube03 by tama (@tamalab) on CodePen.dark

ここは少し分かりにくいので補足します。

“.face1”と”.face2″はともにz軸方向に20px移動されています。

この状態で”.face2″に”transform: rotateY(90deg)”を指定し、Y軸に沿って90度回転させた時の動きを見せているのが先ほどのアニメーションなわけですが、なぜこれで”.face1”の側面に”.face2”が移動するのでしょうか?

鍵になっているのは”transform-origin”で指定した回転の中心です。

ここで回転の中心は”20px 20px 0;”と指定されています。この指定はX軸、Y軸、Z軸の順番に指定されますので、z軸方向に20px移動されている面と回転の中心は20px離れていることになります。

この状態で”transform: rotateY(90deg)”を指定して面を90度回転させた時、この”回転の中心”と”回転させる面”の間の”20pxという距離”を保ったまま回転します。

つまりここで”transform: translateZ(20px)”を指定しているのは、z軸方向に面を移動させるというよりは”回転の中心と面の間の距離”を指定している、ということです。

というわけでその他の面も作成してすべて”transform: translateZ(20px)”を指定し、それぞれ回転させると以下のようにキューブを作成することができます。(分かりやすいように回転させています)<

See the Pen cube04 by tama (@tamalab) on CodePen.dark

アニメーションの作り方

キューブの回転アニメーションは、CSS3のkeyframesを使用しています。

これは先ほど完成させたキューブのコードから、アニメーションに関する部分を抜粋したものです。

このコードをもとに、説明していきます。

まず、アニメーションの名前を”@keyframes アニメーション名”の形で指定します。ここでは”spincube”という名前を指定しています。

次にアニメーションの動きを指定していきます。

“from”で指定しているのが最初の状態、”to”で指定しているのが最後の状態です。その間の状態を指定しているのが”30%””70%”といった形で記述されている部分です。

ここを文章にすると、「回転していない状態から始まって、アニメーションの長さの30%までに3軸すべて180度回転する。そこからアニメーションの長さの70%まではそのままで、その後”to”で示されている状態に戻る」ということになります。

次に、アニメーションをさせたい要素、ここでは”.cubespinner”に”animation-name: spincube;”を指定します。

さらに長さを”animation-duration”で、繰り返しを”animation-iteration-count”で指定すると、アニメーションが指定された秒数で、指定された回数動くようになります。ここでは”animation-timing-function”も指定していますが、これはなくても大丈夫です。アニメーションの動きをデフォルトの動きよりも細かく指定したい時に使用してください。

参考にしたサイト

HTMLとCSSのみで3D立方体を作ってぐりぐり回してみる。
CSS Transforms についてのメモ
CSS アニメーション

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です