CSS3D：DNA螺旋

· by · in

See the Pen CSS only DNA Spiral by KaBuKi (@kabuki) on CodePen.


CSS3Dで色々実験をしてますが、やはり実用性で考えるものじゃなくお飾りやエフェクト以上でも以下でもなさそうな感じ。「CSSでドラえもん描いてみました」レベル

<li>のbefore、after擬似要素を赤丸・青丸として配置し、<li>を少しずつ回転させているという構造です。間の線は入れない方がきれいに見えたけど、構造を分かりやすくするために入れてます。

CSS3Dで球とか作るのはかなり無理があるのが分かり、描画パフォーマンス的に軽いかどうかはよく分かってませんがソースの記述量なんか考慮しても、やはり3D表現やりたきゃWebGLなりUnityなり普通にやれって感じですね。

筆者について

KaBuKi
ゲームとジョジョを愛するファミッ子世代。好きな言葉は「機能美」。
公私ともにWebサービスを作る系男子。
Tags: