Logo Front-Trends przy użyciu CSS 3D transform

Czy przy użyciu CSS można stworzyć nowe logo konferencji Front-Trends? A gdyby wykorzystać do tego jeszcze transformacje 3D? Zobaczmy co z tego wyszło.

Zanim zaczniesz

Zanim zaczniesz oglądać przygotowane demka, warto zapoznać się z instrukcją obsługi, czytaj gdzie to zadziała. Tu jest biednie :(. Najlepiej z CSS 3D poradził sobie Google Chrome i to tutaj zalecam dalsze testowanie. Poza tym, przykłady zadziałają jeszcze w Safari, choć jest problem z literą „F”, oraz w Firefoxie ale tylko w wersji Nightly (efekty nie są jeszcze oszałamiające, ale liczę że do stabilnej wersji będzie git :D).

Demka

Przygotowałem 3 demka prezentujące jak CSS3 poradził sobie z nowym logiem Front-Trends. W pierwszym jako elementu składowe wykorzystałem kwadraty, przez co całość znacznie odbiega od oryginału, ale też nie wymaga tyle kombinowania co następne przykłądy. Link do dema nr 1.
Następne demo jest już tak bliskie oryginałowi jak tylko się dało. Tu jako elementy wykorzystałem trapezy, a całość można zobaczyć tu: link do dema nr 2.
Trzeci przykład różni się od drugiego tylko tym, że dodałem animację by pokazać, że logo jest faktycznie przestrzenne :). Link do dema nr 3.

Podsumowanie

Na chwilę obecną pozostawiam tylko linki, bez większego opisu, ale liczę, że znajdę w sobie siłę i skleję artykuł pokazujący jak używać transformacji 3D w CSS. A teraz? Poszukajmy kolejnego logo, które można przenieść do CSS. Może OnGameStart :D?