3D i CSS

Zadbaj o dobrą organizację dzięki kolekcji Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.

Paul Kinlan

Wprowadzenie

Przez długi czas grafika 3D była zarezerwowana dla aplikacji na komputery. Wraz z wprowadzeniem na rynek zaawansowanych smartfonów, które mają dostęp do natywnego przyspieszania GPU, zaczęły się one pojawiać prawie 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).

W marcu 2009 r. jako projekt specyfikacji został wprowadzony model transformacji 3D w CSS, aby umożliwić deweloperom tworzenie ciekawych i atrakcyjnych interfejsów użytkownika, które wykorzystują model 3D, pozwalając autorom aplikacji na stosowanie perspektywicznych transformacji 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 było tak łatwo tworzyć interfejsy 3D. Te technologie obniżyły barierę wejścia. Nie musisz już być matematycznym geniuszem, aby tworzyć elementy 3D.

Pamiętaj, że moduł CSS 3D został zaprojektowany z myślą o pomaganiu deweloperom w tworzeniu bogatych i ciekawych wizualnie aplikacji, a nie umożliwianiu tworzenia angażujących światów 3D.

Obsługa przeglądarek i akceleracja sprzętowa

-webkit-perspective

-webkit-transform-3d

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 postanowili nie zwalniać przeglądarek za pomocą czystego rozwiązania do renderowania opartego na oprogramowaniu, a zamiast tego wykorzystać procesor graficzny, który może nie być dostępny na wszystkich platformach.

Wykrywanie cech

A wykrywanie funkcji? Miałem nadzieję, że tego nie zrobisz. 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

Nic nie zastąpi bezpośredniego spróbowania. W tym przykładzie zastosujemy podstawowy zestaw obrotów dowolnego elementu DOM.

Zaczynamy od zdefiniowania perspektywy elementu głównego.

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

Perspektywa jest ważna, ponieważ określa, jak głębokość 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! To wszystko. Element jest w pełni interaktywny i w każdym aspekcie jest pełnoprawnym elementem DOM (z tym, że teraz wygląda jeszcze lepiej). 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 to 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.

W poprzednich przykładach użyliśmy stylów dokumentu zamiast stylów wstawianych. Nie tylko upraszcza przykład, ale też pozwala na wykorzystanie pseudoselektora :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ą transformacj 3D w CSS. W tym samouczku nie omówiliśmy wszystkich możliwości.