2014年3月29日

ここ最近、CSSを使ったビジュアライズ方法を色々と模索中です。今回は、その中で作成した「回転する円」の表現を紹介します。デモとソースコードは以下のリンクからどうぞ。

デモ

デモンストレーション

動作確認は最新版のChrome, Safari, Firefox, IEで行っています。

簡単な解説

ごちゃごちゃと書かれていますが、特に難しいことはしていません。
作成の流れは、以下のようになっています。

  • コンテナの中に、円を5つ作成
  • 円をコンテナの中心に揃える
  • それぞれの円を5方向に移動
  • コンテナを360度回転させる

部分部分を解説していきます。

円の生成

まずはhtmlで元となる要素を作成します。
circle-containerの中に、circleという5つの要素を用意しました。

<div id="wrapper">
    <div class="circle-container">
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>
    </div>
</div>

中心に揃える

次に、全ての円を中心に揃えます。

.circle-container {
  margin: 0 auto;
  position: relative;
  width: 440px;
  height: 440px;
  background: transparent;
  // 省略
}
.circle {
  position: absolute;
  top: 170px;
  left: 170px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  opacity: 0.7;
}

コンテナのpositionをrelative、circleをabsoluteにして絶対座標を有効にします。
コンテナが440px、1つの円の直径が100pxなので、topとleftをそれぞれ

(440/2-100/2)=170px

にすれば中央に揃います。この辺の計算を簡単にするために、やはりlessやscssの導入が必要になるでしょう。border-radiusに50%を指定することで、div要素が円になります。

円の移動

transformを使って円を5方向に移動させます。(冗長になるので、ベンダープレフィックスは省略しました)

.circle:nth-child(1) {
  transform: rotate(0deg) translateX(150px);
  background: #ff504f;
}
.circle:nth-child(2) {
  transform: rotate(72deg) translateX(150px);
  background: #ffe63d;
}
.circle:nth-child(3) {
  transform: rotate(144deg) translateX(150px);
  background: #50dc64;
}
.circle:nth-child(4) {
  transform: rotate(216deg) translateX(150px);
  background: #41c39d;
}
.circle:nth-child(5) {
  transform: rotate(288deg) translateX(150px);
  background: #4db5dc;
}

360/5=72なので、それぞれの円を72度ずつ回転させて均等に配置します。そして、translateXでコンテナの中心からの距離を指定しています。

回転

最後にコンテナを回転させます。まずはkeyframesを使ってアニメーションの設定。(ベンダープレフィックスは省略されてます)

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

その後、コンテナにanimationプロパティを付加します。

.circle-container {
  // 省略
  animation: rotation 6s linear 0s infinite normal none;
}

animationの引数は左から

  • keyframesの名前
  • アニメーションにかかる時間
  • アニメーション効果(easeとか)
  • アニメーションが始まるまでの時間
  • 繰り返し回数(infiniteは無限に繰り返す)
  • 反転再生するかどうか(alternateで順方向と逆方向を繰り返す)
  • アニメーションが終了した時の処理(そのまま留まるか、元に戻るか)

みたいな感じです。別に全部指定する必要は無いのですが、今回は全部書いてみました。詳しい説明はこの辺とか参考にして下さい。

これで円が回り始めます!

まとめ

ありきたりな表現ではありますが、ローディング画面とかちょっとしたアクセントとか、色々使い道はあると思います。

CSSで色んな表現に挑戦するのは、勉強にもなりますし結構楽しいですよー。

CATEGORIES