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
:
gifted-banzai-2qvxs
gifted-banzai-2qvxs danielminschinski
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()
:eloquent-leakey-pvwd1
eloquent-leakey-pvwd1 danielminschinski
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()
:
broken-bash-9emw2
broken-bash-9emw2 danielminschinski
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:
funny-leavitt-ve8l4
funny-leavitt-ve8l4 danielminschinski
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:
busy-bose-bk8us
busy-bose-bk8us danielminschinski
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