Transformacje 3D – perspective
Aby transformacje 3D były możliwe, trzeba spełnić następujący warunek – wymagana jest perspektywa. Nadać możemy ją poprzez dwie właściwości CSS.
Pierwsza właściwość to transform: perspective;. Nadaje ona wybranemu elementowi “głębie”, która służy za perspektywę.
Druga właściwość to: perspective: Xpx (x to liczba) ustawiana elementowi rodzica i dotyczy także elementów w nim zawartych.
Jednostki używane do określania tych właściwości to piksele (px). Zwiększająca wartość zmniejsza wrażenia perspektywy a element oddala się od punktu bazowego.
Sprawdź na przykładzie jak zachowuje się wartość perspective:
Transformacje 3D – “translate3d()”
Właściwość translate3d(x, y, z) definiuje ruch obiektu w trójwymiarowej przestrzeni. Dwie pierwsze wartości określają przemieszczenie w osi X (pozioma) oraz osi Y (pionowa), trzecia w osi Z.
Przykładowo wartość może wyglądać następująco:
transform: translate3d(10%, 10%, 200px); translate3d():Transformacje 3D – “scale3d()”
Właściwość scale3d(x, y, z) jest podobnym działaniu do swojej poprzedniczki działającej w przestrzeni dwuwymiarowej. Teraz będziemy skalować elementy w trzech wymiarach.
Właściwość ta skaluje element kolejno: x w osi X, y w osi Y i z w osi Z.
Właściwość przyjmuje liczby z zakresu od 0 do nieskończoności. W sytuacji liczb mniejszych niż 1 element zostanie zmniejszony. W przypadku gdy liczba będzie zerem to element zniknie, a w sytuacji takiej, gdy liczb dodatnich większych niż 1 zostanie powiększony. Właściwość przyjmuje również liczby ujemne, ale element nie zostanie skalowany.
Spójrz na przykład z zastosowaniem scale3d():
Transformacje 3D – “rotate3d()”
Właściwość rotate 3d() umożliwia obrócenie elementu względem trzech osi jednocześnie.
Właściwość wygląda następująco:
transform: rotate3d(x, y, z, deg); Powyższy kod można wytłumaczyć następująco: x – pozycja wektora x, y – pozycja wektora y, z – pozycja wektora z, deg – jednostka wielkości rotacji podawana w stopniach (możliwe wartości ujemne, element obraca się w kierunku przeciwnym do ruchu wskazówek zegara).
Załóżmy sytuacje, gdy przestrzeń między wektorami będzie taka sama niezależnie od wartości (np. wszystkie wektory mają wartość 5 lub wszystkie mają wartość 100) animacja wyświetli się tak samo.
Przykładowa właściwość może wyglądać następująco:
transform: rotate3d(1, 2, 1, 180deg); Spójrz na poniższy przykład z zastosowaniem powyższej właściwości:
Transformacje 3D – backface-visibility
Właściwość backface-visiblity to właściwość ukrywająca zawartość elementu w momencie gdy możemy zobaczyć jego tylną część. Posiada tylko dwie właściwości: visible – tył elementu jest widoczny, hidden – tył elementu zostaje ukryty a element staje się czarny.
Właściwość może wyglądać następująco:
backface-visibility: hidden; Spójrz na poniższy przykład z zastosowania powyższej właściwości:
Na chwile kończymy poznawać transformacje 3D. Pobawcie się tymi właściwościami. Jak zauważyliście, jest wiele sposobów modyfikacji elementów i wprawiania ich w ruch 3D.
W następnym materiale zobaczycie jak dalej tworzyć animacje przy zastosowaniu CSS! Z góry zapraszam!
Zapraszam do subskrypcji i polubienia mojego blogowo/usługowego fb oraz kanału na YouTube.
Jeżeli chciałbyś/chciałabyś wesprzeć mój blog to zapraszam -> WSPARCIE DLA BLOGA