Jak wspominałem we wpisie dotyczącym animacji (jeśli go nie czytaliscie to zapraszam tutaj) podczas tworzenia poszczególnych klatek możemy swobodnie przekształcać animowany obiekt. Poruszać go, zmieniać rozmiar, kształt czy też obracać go. Nie potrzebujemy do tego doatkowych biblotek czy też JS’a. Wszytsko to możemy osiągnąć przy pomocy właśności transform w CSS.

CSS transform

Oczywiście sama właściwosć sama nic nie zrobi. Wszystko zależy od tego jakie podamy wartości a do wyboru mamy 5 grup przekształceń:

Wszystkie przekształcenia mają swoją wersję zarówno dla prostego 2D, gdzie mamy tylko dwie osie X i Y oraz 3D gdzie dochodzi oś Z. Dodatkowo każda grupa ma wersje, gdzie możemy modyfikować element w wybranej osi lub we wszystkich naraz. Pierwsze 4 wartości są proste i sama nazwa wskazuje co robią, natomiast przy wartości matrix, którą omówię na końcu, warto znać podstawową matematykę.

Transform translate

Transpozycja elementu jest najbardziej podstawowym przekształceniem w graficie. Polega na zmianie pozycji obiektu w przestrzeni. Tutaj warto wspomnieć jak jest skonstruowany układ odniesienia ponieważ wygląda trochę inaczej od tego co znamy ze szkoły a mianowicie jest odwrócony - punkt (0,0) jest w lewym górnym rogu, oś X rośnie od lewej do prawej, natomiast Y rośnie od góry do doły. Mając to na uwadze możemy przesuwać nasz element przy pomocy kilku własności:

See the Pen Transform - translate by Aleksander (@Feridum) on CodePen.

Warty zauważenia jest mały kwadrat po prawej stronie. Ma on dokładnie takie same wymiary jak pozostałe ale dzięki wykorzystaniu perspective(500px) została utworzona perspektywa a sam kwadrat został przesuniety 300 pikseli do tyłu co sprawia wrażenie mniejszego.

Scale

Tutaj też sytuacja jest prosta ponieważ scale służy nam do zmiany wymiarów naszego elementu. Podobnie jak poprzednio mamy 5 dostępnych własności:

See the Pen Transform - scale by Aleksander (@Feridum) on CodePen.

W przypadku scaleZ ma wpływ na położenie obiektu na osi Z. Położenie na tej osi jest wyliczane na podstawie translateZ przemnożonego przez scaleZ. Należy tylko pamiętać, że skala musi być zdefiniowana przed transpozycją by zadziałała.

	transform: perspective(500px) translateZ(10px) scaleZ(-30); //nie zadziała
	transform: perspective(500px) scaleZ(-30) translateZ(10px); //zadziała

Rotate

Pierwsza właściwość, która zmienia sposób prezentacji obiektu. Do tej pory, dla widoku 2D byliśmy w stanie osiągnąć powyższe własności w inny sposób, jednak dla obrotu musimy już z tego skorzystać. Aby obrócić obiekt możemy wykorzystać jedną z następujących funkcji:

Warto wspomnieć że rotate3d może być stosowany jako alternatywa dla obrotu wokół pojedynczych osi:

See the Pen Transform - rotate by Aleksander (@Feridum) on CodePen.

Na przykładach z codepen warto zwrócić uwagę na zielone kwadraty a szczególnie na dwa pierwsze. Każdy z nich jest obrócony o dokładnie taką samą wartość ale zmienił się punkt wokół którego jest obracany. W pierwszym przypadku jest ustawiony domyślnie w środku kwadratu, natomiast w lekko zielonym ustawiłem go przy pomocy właściwości transform-origin: 0 0 na jego lewy górny róg.

Dodatkowo w przypadku obrotu widać jak ważne jest w przypadku obiektów 3d perspektywa. Oba niebieskie kwadraty ją obrócone wokół osi X o ten sam kąt ale w drugi kwadrat został pozbawiony perspektywy co spowodowało utworzenie tak naprawdę jego rzutu prostokątnego na płaszczyznę.

Skew

Do tej pory właściwości pozwalały na zmianę parametrów kształtu - czyli rozmiar, obrót czy umiejscowienie w przestrzeni. Skew natomiast pozwala na zmianę kształtu obiektu poprzez przechylenie go o dany kąt wzdłuż danej osi. Jest to także wyjątkowa właściwość ponieważ działa tylko dla dwóch osi - X i Y:

See the Pen Transform - skew by Aleksander (@Feridum) on CodePen.

Matrix

No i na koniec zostawiłem coś co graficy lubią najbardziej czyli macierz transformacji. W CSS mamy do dyspozycji dwie macierze:

Zasadę działania postaram się opisać dla widoku 2D ale będzie to można łatwo przenieść na widok 3D. Oczywiście by to zrozumieć warto mieć podstawowe pojęcie o matematyce a szczególnie o operacjach na macierzy. Własność matrix ma następującą postać matrix(a,b,c,d,tx,ty) co można przestawić w formie macierzy w następujący sposób

\begin{vmatrix} a & c & tx \newline b & d & ty \newline \end{vmatrix}

Wpisując odpowiednie wartości pod zmienne możemy zmieniać sposób wyświetlania naszego obiektu. Zaraz pokażę parę podstawowych wartości dla macierzy w przykładach ale warto wiedzieć jak są obliczane wartości dla nowego obiektu.

Załóżmy, że mamy kwadrat o szerokości 80px, wysokości 80px i jest umieszczony w lewym górnym rogu ekranu. W związku z tym jego wierzchołki mają następujące współrzędne: (0,0) (80,0) (80, 80) i (0,80). Oczywiście stanie się tak jeśli dodatkowo dodamy transform-origin: 0 0 . Inaczej nasze wierzchołki mają inne współrzędne i obiekt po transformacji będzie wyglądał inaczej.

Zaaplikowanie macierzy spowoduje zmianę tych wartości, dzięki czemu powstanie obiekt o innych wymiarach, położeniu lub kształcie. Próbując zmienić obiekt możemy na ślepo próbować wpisywać wartości albo mniej więcej to sobie obliczyć ponieważ nie jest to ciężkie i opiera się na wymnożeniu dwóch macierzy

$$ \begin{equation} \begin{aligned} \begin{vmatrix} a & c & tx \newline b & d & ty \newline 0 & 0 & 1 \newline \end{vmatrix}
\times
\begin{vmatrix} x & \newline y & \newline 1 & \newline \end{vmatrix} \ \ = \
\begin{vmatrix} new \ x = a*x + c*y +tx & \newline new \ y = b*x + d*y +ty & \newline 1 \newline \end{vmatrix} \end{aligned} \end{equation} $$

Takie obliczenia musimy zrobić dla każdego wierzchołka osobno. Widząc jak to działa możemy zrobić wszystko to co definiowaliśmy wcześniej:

See the Pen Transform - matrix by Aleksander (@Feridum) on CodePen.

Oczywiście nie musimy się w to zagłębiać tylko stosować odpowiednie macierze transformacji ale warto czasami wiedzieć jak coś działa pod spodem.