Pokud už vytváříme vlastní CAD, byla by škoda zůstat jen u 3D. Můžeme přece využít i čtvrtý rozměr – čas. A když už nám CSS nabízí podporu změn v čase — tedy animace a přechody (transition) — proč toho nevyužít?
Animace pomocí @keyframes umožňují podrobnou definici změn v čase. Naopak transition slouží ke snadnému a plynulému přechodu mezi dvěma stavy. Každá z těchto možností má své místo.
Jednoduché animace
Jednoduché animace chápu jako takové, které lze napsat „z hlavy“ — tedy bez potřeby složitých výpočtů nebo generování. Uživatel CADu by měl mít možnost s tělesy pohybovat právě tímto způsobem: intuitivně, přirozeně, snadno. Náš editor by mu to měl umožnit.
Přechody
Kromě animací, které běží samy, jsou často potřeba i přechody řízené uživatelem — třeba pomocí ovládacích prvků. Chceme mít možnost tělesa otáčet, posouvat, zvětšovat... a to vše s jemným přechodem.
Ve výsledné scéně se snažíme obejít bez JavaScriptu. Stav můžeme ukládat buď do HTML (například pomocí checkbox nebo radio prvků), nebo přímo do CSS, jak to ukazuje příklad s „Boromejskými prsteny“.
Když stav ukládáme v CSS, používáme většinou ovládání přes hover, místo klasického click. Každý přístup má své plusy i mínusy. Hover třeba umožňuje zůstat „mezi stavy“, což je u radio prvků obtížnější.
Možná si všimnete, že „oblá“ tělesa jsou ve skutečnosti lehce hranatá. Je to dáno tím, že CSS pracuje jen s rovinnými prvky — složenými z ploch. Beziérovy plochy nebo jiné typy zakřivení zatím CSS neumí.
V příštím článku se zaměříme právě na tvorbu a emulaci oblých těles. Ukážeme si několik triků, jak vytvořit vizuální iluzi zakřivení a podíváme se na techniky, které nám k tomu pomohou.