はしくれエンジニアもどきのメモ

情報系技術・哲学・デザインなどの勉強メモ・備忘録です。

CSS3 のみでキューブ(立方体)を作る!

CSS3 のみでキューブ(立方体)を作る!

CSS3 のみでキューブを作ってみました。

キューブ

6面をつくって、それぞれをtranslate で上、下、左、右、手前、奥に配置てしています。

codepen.io

アニメーション付きキューブ

@keyframesで回転させてみました。

 

codepen.io