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で計算して出力した方がよりスマートだと思います。
一つ一つは小粒なテクですが、複合して見せ方次第でダイナミックな表現になります。
