CSSのボックスモデルの構造をCSSアニメーションで可視化

CSSのボックスモデルの構造をCSSアニメーションで可視化したインタラクティブなデモを紹介します。

こういうのを実装する機会は限られますが、何かあった時にやってみたいですね。

CSSのボックスモデルをCSSアニメーションで可視化

CSSのボックスモデルをCSSアニメーションで可視化

最近のボックスモデルについての詳しい解説は、以前の記事をご覧ください。

実際の動作は、下記でお楽しみください。
サイズがここだと小さいので、下部の0.5xか上部のEditから見るとよいです。

See the Pen
Explode A Node: 3D Box Model
by Adam Argyle (@argyleink)
on CodePen.

実装コードは、下記の通り。

CSSの表現力もかなりパワーアップしていますね。

sponsors

top of page

©2021 coliss