Ta strona została przetłumaczona przez Cloud Translation API.

3D i CSS

Paul Kinlan

Wprowadzenie

Przez długi czas grafika 3D była zarezerwowana dla aplikacji na komputery. Niedawno, dzięki wprowadzeniu zaawansowanych smartfonów z dostępem do natywnej akceleracji GPU, zauważyliśmy, że technologia 3D jest używana niemal wszędzie.

Technologia 3D jest zwykle używana głównie do gier lub zaawansowanych interfejsów użytkownika. Dopiero wprowadzenie transformacji perspektywy w WPF i Silverlight umożliwiło deweloperom aplikacji stosowanie efektów 3D w elementach interfejsu (w szakce 3D nie jest wcale proste).

Model przekształcania CSS 3D został wprowadzony w marcu 2009 r. jako wersja robocza specyfikacji, aby umożliwić programistom stron internetowych tworzenie ciekawych i atrakcyjnych interfejsów użytkownika korzystających z trójwymiarowego interfejsu, umożliwiając autorom aplikacji stosowanie przekształceń 3D do dowolnego wizualnego elementu DOM.

Projekt roboczy transformacji 3D w CSS jest logicznym rozszerzeniem modelu transformacji 2D w CSS i wprowadza dodatkowe właściwości, takie jak perspektywy, obroty i transformacje w przestrzeni 3D.

Nigdy wcześniej nie udało nam się tak łatwo tworzyć interfejsów 3D. Te technologie obniżyły barierę wejścia. Nie musisz już być matematycznym geniuszem, aby tworzyć elementy 3D.

Warto zauważyć, że moduł CSS 3D został zaprojektowany tak, aby pomagać programistom w tworzeniu bogatych i atrakcyjnych wizualnie aplikacji, ale nie umożliwia budowania wciągających światów 3D.

Obsługa przeglądarek i akceleracja sprzętowa

-webkit-perspective

Obsługa przeglądarek

Źródło

-webkit-transform-3d

Obsługa przeglądarek

Źródło

Pamiętaj, że chociaż przeglądarka może „obsługiwać” obrazy 3D, może nie być w stanie ich renderować z powodu ograniczeń sprzętowych i sterowników. Sceny 3D oparte na DOM mogą być bardzo kosztowne pod względem obliczeniowym, dlatego producenci przeglądarek zamiast spowolniać przeglądarki za pomocą czystego rozwiązania do renderowania opartego na oprogramowaniu postanowili wykorzystać procesor graficzny, który może nie być dostępny na wszystkich platformach.

Wykrywanie cech

A co z wykrywaniem cech? Miałam nadzieję, że nie o to pytasz. Deweloperzy korzystają z narzędzi takich jak Modernizr, aby wykrywać obsługę określonych funkcji i możliwości przeglądarki. Chociaż można wykryć obsługę transformacji 3D, nie można wykryć akceleracji sprzętowej, a to ona jest kluczowym elementem.

Podstawowy przykład

Najlepiej jest zacząć od razu. W tym przykładzie zastosujemy podstawowy zestaw obrotów dowolnego elementu DOM.

Najpierw definiujemy perspektywę elementu katalogu.

<div style="-webkit-perspective: 800; perspective: 800; margin: 100px 0 0 50px">

Perspektywa jest ważna, ponieważ określa, jak głębia sceny 3D jest renderowana. Wartości od 1 do 1000 dadzą bardzo wyraźny efekt, a wartości powyżej 1000 – mniej wyraźny. Następnie dodajemy iframe i stosujemy obrót o 30 stopni wokół osi Z i Y.

<iframe
    src="http://www.html5rocks.com/"
    style="-webkit-transform: rotate3d(0, 1, 1, 30deg)"></iframe>

BAM! Oznacza to, że element jest w pełni interaktywny i pod każdym względem jest w pełni działającym elementem DOM (oprócz tego, że teraz wygląda jeszcze fajniej). Jeśli Twoja przeglądarka nie obsługuje transformacji 3D, nic się nie stanie. Zobaczysz tylko prosty element iframe bez rotacji. Jeśli Twoja przeglądarka obsługuje przekształcenia 3D, ale bez akceleracji sprzętowej, może wyglądać nieco dziwnie.

Animowanie

Uwielbiam przekształcenia 3D w CSS3, ponieważ świetnie współpracują z modułem przejścia CSS. Animacje i przejścia można łatwo zdefiniować w CSS, a ich stosowanie w 3D nie jest wyjątkiem.

Animowanie elementów z perspektywą 3D jest bardzo proste. Wystarczy ustawić styl „transition” na „transform”, a następnie dołączyć czas trwania i funkcję animacji. Od tego momentu każda zmiana stylu „transformacja” będzie animowana.

Poprawiliśmy poprzednie przykłady, tak aby można było używać stylów dokumentu zamiast stylów wbudowanych. Nie tylko upraszcza przykład, ale też pozwala na wykorzystanie w próbce selektora :hover. Za pomocą selektora :hover można inicjować przejścia, po prostu przesuwając kursor nad elementem. Świetnie!

Podsumowanie

To był tylko szybki przegląd niektórych fajnych efektów, które można zastosować do dowolnego widocznego elementu DOM za pomocą transformacji 3D w CSS. W tym samouczku nie omówiliśmy wszystkich możliwości.