Firefox Nightly wprowadza transformacje CSS 3D. Czeka nas nowa era animowanych wodotrysków?

Jeśli korzystaliście z WWW w latach dziewięćdziesiątych, pewnie pamiętacie, jakim szałem swego czasu były animowane GIF-y. Wyrenderowane animacje obracających się wokół własnej osi ikon kopertek, domków czy trupich czaszek zdobiły (?) niezliczone strony internetowe. Po kilku latach takie animacje wyszły z mody, ba, stały się synonimem webowego obciachu. Jednak wszystko co niemodne, kiedyś znów będzie modne, i tak oto animacje na strony internetowe wracają. Tym razem już nie w postaci prostych GIF-ów, ale zaawansowanych sztuczek CSS i JavaScriptu.

Programiści Mozilli z wielkim zadowoleniem ogłosili, że WebKit nie jest już jedynym engine renderującym, który radzi sobie z transformacjami 3D, które latem tego roku entuzjastycznie zostały powitane przez rozkochanych w wodotryskach webdeweloperów. Nic dziwnego – możliwość tworzenia animacji za pomocą „zwykłego” CSS to wielka szansa na zachwycenie końcowych klientów, którzy zapewne nie zrozumieją, że zapytanie do bazy zostało elegancko zoptymalizowane, ale to, że ich logo obraca się wokół własnej osi, nie wymaga żadnych specjalistycznych wyjaśnień.

Efekt „wow” dostępny jest już także na engine Gecko. W najnowszej wersji Firefoksa 10 (10.0a1) z kanału „nightly” wprowadzono obsługę transformacji 3D CSS. Stało się to teraz – „bo teraz dopiero technologia ta stała się wystarczająco dojrzała” – tłumaczy Chris Heilmann z Mozilli.

Jeśli tworzycie więc strony internetowe, choćby dla popisu, które wykorzystują efekty 3D CSS, możecie zacząć dodawać do nich obsługę Firefoksa. Wystarczy wykorzystać przed właściwościami prefiks producencki -moz-. Inicjalizację 3D CSS przeprowadza się dyrektywą -moz-transform-style: preserve-3d;.

Jak to wygląda w praktyce, możecie zobaczyć dzięki udostępnionym demonstracjom – znanym już, lecz dostosowanym do Firefoksa. To m.in. popularne demo z obracającym się logo HTML5, czy rotującymi po powierzchni walcowej boksami. Można też w FF10 pograć z Nyan Catem w grę Browser Memory.

Co warte podkreślenia, z naszych pobieżnych testów, implementacja CSS 3D w Firefoksie 10 jest lepsza, niż w Chrome 16 – animacje są bardziej płynne, Gecko lepiej też sobie radzi z ich skalowaniem, niż WebKit. Zapraszamy więc do eksperymentowania – informacje niezbędne do nauczenia się posługiwania transformacjami 3D znajdziecie w szkicu Konsorcjum WWW – dev.w3.org/csswg/css3-3d-transforms/.

źródło: hacks.mozilla.org

Podoba Ci się ten tekst? Powiedz o tym innym na Fb: lub na G+:

publikuj:

wydrukuj

5 skomentuj »

Komentarze

#1 Marek Polski 2011-10-27 15:59:03 0
Super, mogli by wprowadzić nawet 8d, tylko co z tego. Za webdeveloperami zawsze będzie się ciągnął smród po gaciach w postaci IE6-8.
IP: 78.8.51.[...] Mozilla/5.0 (Windows NT 5.1; rv:7.0.1) Gecko/20100101 Firefox/7.0.1
#2 Ktoś 2011-10-27 22:48:39 1
A kto jeszcze wspiera 6tkę? Ja mam na to prosty sposób - chcesz wsparcia dla archaicznych technologii to płać - cena za projekt rośnie odpowiednio wysoko a umowa gwarantuje jedynie zbliżony wygląd. Jeszcze mi się nie zdarzyło żeby klient się upierał lub co gorsza zrezygnował.
IP: 93.175.122.[...] Mozilla/5.0 (Windows NT 6.1; WOW64; rv:7.0.1) Gecko/20100101 Firefox/7.0.1
#3 makusik 2011-10-28 08:20:59 1
dla 6 ???? juz od roku nie oferujemy wsparcia dla 6 chodzby klient sie upieral, liczby mowia same za siebie 6 - 1,39% 7 - 6% i caly czas maleja, w erze samouaktalniajacych sie przegladarek nie jest to juz problem
IP: 78.10.48.[...] Mozilla/5.0 (Windows NT 6.1; WOW64; rv:7.0.1) Gecko/20100101 Firefox/7.0.1
#4 Splitfire^® 2011-10-28 08:48:18 0
Niektórzy lubią oldschool :-D
IP: 78.133.207.[...] Mozilla/5.0 (Windows NT 5.1; rv:7.0.1) Gecko/20100101 Firefox/7.0.1
#5 eimi^® 2011-10-28 09:14:10 0
@Marek Polski, jeśli się ciągnie, to tylko przez postawę defetystów. Jak @Ktoś napisał - to kwestia ceny. Jak klient chce, to można robić wsparcie dla IE4 nawet. Czemu nie... ale to wszystko znajdzie odbicie na fakturze. Oracle oferuje jakieś wsparcie dla Javy 3 bodajże ;). Nie jest tanie.
IP: 83.8.24.[...] Mozilla/5.0 (X11; Linux x86_64; rv:7.0.1) Gecko/20100101 Firefox/7.0.1

Aby dodać komentarz, musisz podać swój nick, treść komentarza oraz poprawnie przepisać oba słowa z obrazka (słowa muszą być rozdzielone spacją).
W treści komentarza można używać języka formatowania BBcode.