Jak tworzyć projekty 3D za pomocą właściwości CSS3 Transform

Istnieją dwa wymiary, jeśli chodzi o właściwość transform CSS3, 2D i 3D. Podczas animacji transformacje służą do zmiany stanu elementu z jednego stanu na inny. Ten samouczek jest rozszerzeniem tego przewodnika po animacjach 2D. Przedstawię kilka informacji na temat projektowania 3D i tego, jak można tworzyć niesamowite animacje, łącząc te podstawowe koncepcje.

Transformacje 3D mogą być dość szczegółowe i mogą stać się skomplikowane, jeśli łączy się wiele różnych elementów, więc pomocne jest rozpoczęcie od podstawowych elementów konstrukcyjnych. Niektóre z tych koncepcji będą wyglądać znajomo, ale „z” będzie wyglądać na nowe podczas pracy w 3D. Transformacje 3D rozszerzają transformacje CSS 2D o oś Z, umożliwiając transformacje 3D elementów DOM.

Co to jest oś Z?

Będzie dużo odniesień do osi Z. Łatwo jest myśleć o tym jako o odległości pomiaru czegoś w kierunku do lub od ciebie. Jeśli jest to wartość dodatnia, jest bliżej Ciebie. Jeśli jest to wartość ujemna, jest dalej od ciebie.

Przykłady transformacji 3D

Podstawowe właściwości transformacji 3D to translate3d , scale3d , rotateX , rotateY , rotateZ , perspective i matrix3d ​​. Więcej argumentów jest dołączonych do translate3d , scale3d i matrix3d ​​, ponieważ pobierają one argumenty dla x, y i z. Właściwość scale przyjmuje wartość dla kąta, a perspektywa również przyjmuje pojedynczą wartość.

Tłumaczyć

przetłumaczZ()

To definiuje translację 3D tylko przy użyciu wartości osi Z. Być może pamiętasz tłumaczenie x i y z tłumaczenia 2D. Idea jest taka sama w przypadku translateX() , translateY() i translateZ() , ponieważ każda z nich przyjmuje wartość długości, która przesuwa element o określoną odległość wzdłuż właściwej osi.

W tym przykładzie translateZ(-20px) przesunie element o 20 pikseli od przeglądarki.

Oto fragment kodu do utworzenia tego przykładu:

 -webkit-transform: translateZ(-20px); -ms-transform: translateZ(-20px); transform: translateZ(-20px);

tłumacz3d()

Funkcja translate3d() służy do przesuwania pozycji elementu w przestrzeni 3D. Ta transformacja jest tworzona przez określenie współrzędnych, które określają, jak bardzo się porusza w każdym kierunku.

Funkcja transform: translate3d(20px, -15px, 70px); przesuwa obraz o 20 pikseli wzdłuż dodatniej osi x, 15 pikseli na ujemnej osi y, a następnie o 70 pikseli wzdłuż dodatniej osi z.

Oto przykład translate3d :

 -webkit-transform: translate3d(20px, -15px, 70px); -ms-transform: translate3d(20px, -15px, 70px); transform: translate3d(20px, -15px, 70px);

Jest całkiem oczywiste, że zachodzi pewne nakładanie się drugiego kwadratu. Może nie wyglądać tak dramatycznie, jak oczekiwano, ale dodanie właściwości perspektywy (w dalszej części tego samouczka) pomoże.

Obracać się

rotate3d() obraca element w przestrzeni 3D o określony kąt wokół osi. Można to zapisać jako rotate(x, y, z, angle) .

obróćX()

Wartości pikseli nie będą tutaj działać, muszą być w stopniach. rotateX() obraca element wokół jego osi x o zadany stopień. Widzisz, jak prostokąt jest krótszy? Jest obracany wzdłuż osi x. Ten przykład pokazuje obrót o 55 stopni.

 -ms-transform: rotateX(55deg); /* IE 9 */ -webkit-transform: rotateX(55deg); /* Safari */ transform: rotateX(55deg);

obróćY()

rotateY() obraca element wokół jego osi y. Zauważ, że dolny prostokąt nie jest tak szeroki jak górny? Jest obrócony, więc nie wydaje się być tak szeroki jak prostokąt powyżej, ponieważ jest obracany o 60 stopni.

 -ms-transform: rotateY(60deg); /* IE 9 */ -webkit-transform: rotateY(60deg); /* Safari */ transform: rotateY(60deg);

obróćZ()

rotateZ() obraca element wokół jego osi Z o określony stopień. W tym przypadku wartość wynosi 120 stopni.

 -ms-transform: rotateZ(120deg); /* IE 9 */ -webkit-transform: rotateZ(120deg); /* Safari */ transform: rotateZ(120deg);

obróć3d()

Funkcja rotate3d(1, -1, 1, 45deg) obraca obraz wzdłuż osi y o kąt 45 stopni. Należy pamiętać, że można użyć wartości ujemnych, aby obrócić element w przeciwnym kierunku.

Ponieważ jest to bardziej złożone niż specyfikacja pojedynczej osi, rotate3d może być podzielona w następujący sposób: rotate3d(x,y,z,angle) gdzie x=1, y=-1, z=1, a kąt obrotu = 45 stopni .

Kod do stylu wygląda następująco:

 -ms-transform: rotate3d(1, -1, 1, 45deg); /* IE 9 */ -webkit-transform: rotate3d(1, -1, 1, 45deg); /* Safari */ transform: rotate3d(1, -1, 1, 45deg);

Testowanie podstaw

Zgodnie z ruchem wskazówek zegara wzdłuż osi x o 45 stopni.

 transform: rotate3d(1, 0, 0, 45deg);

Zgodnie z ruchem wskazówek zegara wzdłuż osi Y o 45 stopni.

 transform: rotate3d(0, 1, 0, 45deg);

Zgodnie z ruchem wskazówek zegara wzdłuż osi Z o 45 stopni.

 transform: rotate3d(0, 0, 1, 45deg);

Warto wspomnieć, że w zależności od określonych wartości czasami rotacja nie będzie zauważalna; na przykład nie byłoby to zauważalne: transform: rotate3d(0, 0, 0, 50deg);

Perspektywiczny

To chyba najbardziej „wymiarowa” transformacja. Tutaj dosłownie zyskasz perspektywę. Jeśli zastosujesz transformacje 3D do elementu bez ustawienia perspektywy, wynikowy efekt nie będzie wyglądał trójwymiarowo. Jest to coś, co można również dodać do powyższych właściwości.

Aby aktywować przestrzeń 3D, element potrzebuje perspektywy. Można to zastosować na dwa sposoby: za pomocą właściwości transform lub właściwości perspective .

Właściwość transform wyglądałaby następująco: transform: perspective(600px); a właściwość perspektywy wyglądałaby tak: perspective: 600px; .

Poniższe przykłady będą zmieniać go między tymi dwoma, więc przyjrzyj się uważnie kodowi.

Wartość perspective określa intensywność efektu 3D. Pomyśl o niskiej wartości jako naprawdę zauważalnej, na przykład o tym, jak się czujesz, gdy patrzysz na duży przedmiot. Gdy jest większa wartość, efekt jest mniej intensywny.

Położenie punktu zbiegu można również dostosować. Warto o tym wspomnieć i przeprowadzić wiele eksperymentów, ponieważ jest to istotne dla perspektywy CSS. Domyślnie punkt zbiegu pomieszczenia 3D jest umieszczony na środku. Użyj właściwości perspektywy-origin, aby zmienić położenie punktu zbiegu. Wyglądałoby to mniej więcej tak: perspective-origin: 15% 55% .

Skala

skalaZ()

Definiuje to transformację skali 3D, podając wartość dla osi Z. Ponieważ skaluje się tylko wzdłuż osi Z, potrzebne są inne funkcje, aby zademonstrować efekt skalowania. Zobacz, jak prostokąt jest skierowany w stronę widza i jak naprawdę pokazuje perspektywę?

Aby w pełni zrozumieć skalę (Z), baw się wartością, a zobaczysz, że perspektywa staje się „ostrzejsza” wraz z większymi wartościami.

skala3d(x,y,z)

Funkcja scale3d() zmienia rozmiar elementu i jest zapisywana jako scale(x, y, z) . Podobnie jak scaleZ , nie jest oczywiste, jak w pełni wygląda perspektywa, chyba że jest używana z perspective .

Ten przykład używa tego:

 -ms-transform: perspective(500px) scale3d(0.8, 2, 0.2); /* IE 9 */ -webkit-transform: perspective(500px) scale3d(0.8, 2, 0.2); /* Safari */ transform: perspective(500px) scale3d(0.8, 2, 0.2);

Krótka uwaga: jeśli wszystkie trzy współrzędne wektora są równe, skalowanie jest jednolite i nie będzie zauważalnej różnicy.

 transform: scale3d(1, 1, 1); /* unchanged */ transform: scale3d(2, 2, 2); /* twice the original size */

Macierz3d()

Macierz 2D może przyjmować sześć wartości, podczas gdy macierz 3D przyjmuje 16 (macierz 4×4)! Gdyby omówiono wszystkie szczegóły, post byłby bardzo długi, więc jeśli chcesz dokładniej zbadać tę koncepcję, gorąco polecam ten interaktywny eksperyment matrix3d ​​na Codepen.

matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1)

Jak stworzyć
Animacje z transformacjami 3D

Teraz, gdy podstawy są już omówione, następnym krokiem jest tworzenie interaktywnych animacji. Za pomocą przekształceń i przejść CSS3 elementy zmieniają się z jednego stanu na inny, obracając, skalując lub dodając perspektywę.

Jeśli nie masz doświadczenia z animacjami CSS, ważne jest, aby wiedzieć, że bez przejścia transformowany element zmieniłby się gwałtownie z jednego stanu do drugiego. Aby temu zapobiec, można dodać przejście, dzięki czemu można kontrolować zmianę, nadając jej gładszy wygląd.

Jak utworzyć odwrócenie karty

Kto nie lubi grać w karty? Ten przykład przedstawia dwustronną kartę i możesz zobaczyć obie strony, odwracając ją za pomocą transformacji. Jeśli spojrzysz na tag body , wiele efektów pochodzi z właściwości perspective . Jest ustawiony na 500px. Niższa wartość, taka jak 100 pikseli, wygląda na bardzo „przekrzywioną”.

Oto początkowy kod HTML:

 <div class="wrapper"> div class="side-one"></div> <div class="side-two"></div> </div>

CSS jest tym, co sprawia, że ​​tak się dzieje:

 body { -webkit-perspective: 500px; perspective: 500px; } .wrapper { -webkit-transition: all 1s ease-in; transition: all 1s ease-in; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; position: relative; margin: 100px auto; width: 250px; height: 250px; cursor: pointer; } .wrapper div { position: absolute; -webkit-backface-visibility: hidden; backface-visibility: hidden; width: 100%; height: 100%; border-radius: 10px; background-position: 50% 50%; background-size: 150px; background-repeat: no-repeat; box-shadow: inset 0 0 45px rgba(255,255,255,.3), 0 12px 20px -10px rgba(0,0,0,.4); color: #FFF; text-align: center; text-shadow: 0 1px rgba(0,0,0,.3); } .side-one { z-index: 400; background: #50c6db url(image.png); } .side-two { -webkit-transform: rotateY(-180deg); transform: rotateY(-180deg); background: #ef4e65 url(image.png); } .wrapper:hover { -webkit-transform: rotateY(-1turn); transform: rotateY(-1turn); }

Można to znaleźć na Codepen.

Jeśli nie masz doświadczenia z transformacjami, może to wyglądać interesująco: transform: rotate(1turn); Ta jednostka jest idealna dla naszej karty, ponieważ jednostka „obrót” jest dokładnie taka, jak brzmi, czyli jedno pełne koło.

Użyłem również łagodzenia, aby stworzyć niestandardowy sposób obracania. Osiąga się to za pomocą transition: all 1s ease-in; .

Inną właściwością 3D we fragmencie jest transform-style: preserve-3d; . Uwzględniając to, pozwala elementowi „kołysać się” w przestrzeni trójwymiarowej, zamiast pozostawać z elementem macierzystym.

Jak stworzyć tekst z efektem 3D

Ten przykład został zainspirowany starym plakatem filmowym. Istnieje tak wiele różnych krojów pisma, które mogą wykorzystywać świetne style CSS, więc unikalne efekty czcionek są zdecydowanie możliwe. Ten tekst używa rotate3d transform3d , aby nadać mu unikalną transformację.

HTML jest dość prosty:

 <div class="container"> <div class="text-wrapper"> <div class="text">New York City</div> </div> </div>

Oto podstawowy CSS:

 .container{ -webkit-perspective: 600; } .text { transform: rotate3d(2, 2, .5, 22deg)translate3d(100px, 0px, 0px); }

Bardziej szczegółowy CSS i przykład można znaleźć na Codepen.

Mamy nadzieję, że transformacje CSS 3D wniosą nowy wymiar do Twoich projektów. Wykorzystanie perspektywy to świetny sposób, aby elementy wyglądały na bardziej przestrzenne. W połączeniu z przejściami daje wiele możliwości podczas tworzenia animacji.