Wstęp
Aplikacje komputerowe od dawna są dostępne w technologii 3D. Niedawno, wraz z wprowadzeniem zaawansowanych smartfonów z dostępem do natywnego akceleracji GPU, zauważyliśmy niemal wszędzie zastosowanie technologii 3D.
3D jest zazwyczaj używany głównie do grania lub korzystania z niektórych zaawansowanych interfejsów użytkownika. Dopiero po wprowadzeniu Perspective w WPF i Silverlight odpowiedni model stosowania efektów 3D do elementów interfejsu stał się praktycznym rozwiązaniem dla programistów aplikacji (w końcu 3D nie jest łatwe).
Model przekształcania CSS 3D został wprowadzony w marcu 2009 r. jako specyfikacja w wersji roboczej, aby umożliwić programistom stron internetowych tworzenie ciekawych i atrakcyjnych interfejsów użytkownika korzystających z 3D przez umożliwienie im stosowania przekształceń perspektyw 3D do dowolnego wizualnego elementu DOM.
Wersja robocza transformacji CSS 3D to logiczne rozszerzenie modelu transformacji CSS 2D, które wprowadza dodatkowe właściwości, takie jak: perspektywa, obrót i przekształcenia w przestrzeni 3D.
Jeszcze nigdy wcześniej nie mieliśmy tak prostego interfejsu 3D. Te technologie ułatwiły wejście na rynek. Już nie trzeba być specjalistką od matematyki, aby tworzyć elementy 3D.
Warto zauważyć, że moduł CSS 3D ma pomagać programistom w tworzeniu bogatych i atrakcyjnych wizualnie aplikacji, ale nie umożliwia tworzenia wciągających światów 3D.
Obsługa przeglądarek i akceleracja sprzętowa
-webkit-perspective
-webkit-transform-3d
Trzeba pamiętać, że chociaż przeglądarka może „obsługować” tryb 3D, może nie być w stanie wyświetlić 3D ze względu na ograniczenia sprzętowe i sterowniki. Sceny 3D oparte na modelu DOM mogą być bardzo kosztowne, dlatego dostawcy przeglądarek zdecydowali się na zmniejszenie szybkości przeglądarek za pomocą samego oprogramowania renderującego. Zamiast tego skorzystają z procesora graficznego, który może nie być dostępny na wszystkich platformach.
Wykrywanie cech
A co z wykrywaniem cech? Miałam nadzieję, że o to nie pytasz! Programiści używają takich narzędzi jak Modernizr, by wykryć obsługę określonych funkcji i umiejętności przeglądarek. Można wykryć, że transformacje 3D są obsługiwane, ale nie da się wykryć akceleracji sprzętowej. Jej kluczowym elementem jest akceleracja sprzętowa.
Próbka podstawowa
Nie ma nic lepszego niż wchodzenie od razu do wiadomości. 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, bo określa sposób renderowania sceny 3D, wartości od 1 do 1000 dają bardzo wyraźny efekt, a wartości poniżej 1000 – mniej. Następnie dodajemy element iframe i obracamy widok wokół osi Z i Y o 30 stopni.
<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 kompletnym elementem DOM (z tą różnicą, że teraz wygląda jeszcze lepiej). Jeśli Twoja przeglądarka nie obsługuje przekształceń 3D, nic się nie wydarzy. Zobaczysz prosty element iframe bez zastosowanej rotacji. Jeśli Twoja przeglądarka obsługuje przekształcenia 3D, ale bez akceleracji sprzętowej, może to wyglądać dziwnie.
Animowanie
W przekształceniach 3D w CSS3 najbardziej podoba mi się to, że są tak pięknie połączone z modułem przejścia CSS. Animacje i przejścia można łatwo zdefiniować w CSS, a zastosowanie ich do widoku 3D nie jest wyjątkiem.
Tworzenie animacji elementów z perspektywą 3D jest proste. Wystarczy ustawić styl „przejścia” na „przekształć”, dodać czas trwania i funkcję animacji. Od tego momentu każda zmiana w stylu „transform” będzie animowana.
Przerobiliśmy wcześniejsze przykłady, aby zamiast stylów wbudowanych stosować style dokumentu. Nie tylko wyjaśnia to przykład, ale umożliwia również wykorzystanie pseudoselektora :hover. Za pomocą selektora :hover przejścia można inicjować, przesuwając mysz nad elementem. Świetnie!
Podsumowanie
To był krótki przegląd niektórych świetnych efektów, które można zastosować do dowolnego widocznego elementu DOM za pomocą przekształceń CSS 3D. Jest jeszcze wiele rzeczy, które można zrobić, które nie zostały omówione w tym samouczku.