Animacja 3d w css możliwa już od wersji IE10, za pomocą przychodzi nam parametr perspective.
Nasza animacja będzie polegała na obracaniu sześcianu. Jak wiemy sześcian to sześć ścian więc zaczniemy od nich.
<div class="scene">
<div class="cube">
<div class="cube__wall cube__front">front</div>
<div class="cube__wall cube__back">back</div>
<div class="cube__wall cube__right">right</div>
<div class="cube__wall cube__left">left</div>
<div class="cube__wall cube__top">top</div>
<div class="cube__wall cube__bottom">bottom</div>
</div>
</div>Jak widać nic szczególnego, scene - która zawiera div [cube] wraz z sześcioma ścianami. Każda ze ścian posiada napis tak aby można było zauważysz rotację tej kostki.
Teraz same "mięsko" a mianowicie css. Zaczynamy od podstaw zbudowanie podstaw, body na 100% wysokości do tego dodam animację backgroundu - tutaj wykorzystałem z generatora gradientów