CSSだけで作る万華鏡

goto_jp 121views 更新:2016年9月27日

See the Pen kaleidoscope by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen.

「Jade」、「Scss」表示の「VIEW COMPILED」からコンパイル後のソースを確認できます。

用いてるテクニックとしては以下2点。

  • CSS Animation
  • CSS 3D

この万華鏡は1つの本体(parent)の中に3つの面(c1〜3)で構成しています。

本体はただ画面中央に鎮座し、全体を回転しているだけです。

面はグラデーションをアニメーションで色変化をさせ、パースを付けて3D変形させることで立体的な奥行きを付けています。3D系プロパティはJSで計算して出力した方がよりスマートだと思います。

一つ一つは小粒なテクですが、複合して見せ方次第でダイナミックな表現になります。

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません