#71. 3D – tworzymy transformacje

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:

PRZYKŁAD. KLIKNIJ, ABY PODEJRZEĆ…

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); 
Wynikiem powyższe właściwości będzie przesuniecie obiektu o 10% na osi Y, 10% na osi X oraz 200px na osi Z. Jednostkami używanymi dla przemieszczania się na osi Z mogą być tylko wartości w pixelach. Spójrz na poniższy przykład z zastosowaniem translate3d():
PRZYKŁAD. KLIKNIJ, ABY PODEJRZEĆ…

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():

PRZYKŁAD. KLIKNIJ, ABY PODEJRZEĆ…

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: 

PRZYKŁAD. KLIKNIJ, ABY PODEJRZEĆ…

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:

PRZYKŁAD. KLIKNIJ, ABY PODEJRZEĆ…

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 

Chcesz na bieżąco otrzymywać informację o nowych materiałach? Zapisz się do NEWSLETTERA!