Trójwymiarowa animowana kostka w samym CSS!

Cześć!

Pamiętacie materiał flipcards? Stworzyliśmy wtedy obracającą się kartę za pomocą perspektywy oraz odpowiednich transformacji w CSS.

W tym materiale pójdziemy o krok dalej - od zera zakodujemy obracającą się trójwymiarową kostkę - bez WebGL, bez JavaScriptu - sam CSS!

Omawiany kod źródłowy: http://jsbin.com/picusavage/edit?html... (ja JSbinie przełączanie klas może nie działać jak na filmiku, możecie przekopiować to np do Bracketsa)

Podczas tworzenia tego przykładu korzystaliśmy z przeglądarki Google Chrome w wersji 57.0.2987.110 (64-bit)

Pamiętajcie, że przykłady widoczne w naszych nagraniach mają charakter demonstracyjny, pokazowy i nie powinniście używać ich w dokładnie tej samej formie na produkcji.

Ciekawe źródło w języku angielskim do nauki transformacji w CSS3: https://desandro.github.io/3dtransforms

Koduje - Kursy i ćwiczenia z Front-Endu
http://koduje.pl/