Funkcje transform CSS3 w przestrzeni 3D

Jak do tej pory zajmowaliśmy się funkcjami właściwości transform, które służyły wyłącznie do przekształcenia elementu HTML w przestrzeni 2D, jednak przyszedł czas na to, abyśmy poszerzyli nieco naszą wiedzę, dlatego w tej części kursu CSS zajmiemy się funkcjami właściwości transform, które służą do przekształcenia elementu HTML w przestrzeni 3D.

Zagadnienia takie jak: pozioma oś X, pionowa oś Y, pozycja początkowa elementu HTML, czy też jego punkt zero będą obowiązywać również przy poznawaniu funkcji służących do przekształcania elementu HTML w przestrzeni 3D, jednak dodatkowo musimy zapoznać się z kolejnymi teoretycznymi zagadnieniami takimi jak: oś Z elementu HTML, przestrzeń 3D.

Oś Z
Oś Z, tak samo jak w matematyce, jest osią prostopadłą do osi X oraz osi Y.

Oś Z zawsze przechodzi prostopadle przez miejsce przecięcia się poziomej osi X oraz pionowej osi Y, czyli przez punkt zero. Oś Z wyznacza wymiar długości w przestrzeni 3D.
Przestrzeń 3D
Przestrzeń 3D jest obszarem, który posiada swoją szerokość (wyznaczoną przez poziomą oś X), wysokość (wyznaczoną przez pionową oś Y) oraz długość (wyznaczoną przez prostopadłą oś Z). W obrębie wspomnianego obszaru możemy dokonać przekształcenia elementu HTML w przestrzeni 3D, np. oddalić go od naszego wzroku, czy też pochylić go w różne strony. Teoretycznie obszar przestrzeni 3D jest nieograniczony.

Oprócz wyżej wymienionych zagadnień musimy zrozumieć czym jest perspektywa oraz punktu środka perspektywy, lecz te zagadnienia zostaną wyjaśnione w następnej części kursu CSS, ponieważ na razie musimy skupić się na samych funkcjach właściwości transform, które służą do przekształcenia elementu HTML w przestrzeni 3D.

Jeżeli chodzi o oś Z, to należy ją rozumieć jako oś, która przeszywa element HTML na wylot w jego punkcie zero. Obrazek umieszczony poniżej powinien nieco bardziej rozjaśnić nam pojęcie osi Z.

prostopadła oś Z elementu HTML w przestrzeni 3D

Lista funkcji, które są wykorzystywane wraz z właściwością transform, do przekształcenia elementu HTML w przestrzeni 3D, została umieszczona poniżej.

translateZ( z )
przesunięcie elementu HTML w tył lub w przód od jego pozycji początkowej
translate3d( x,y,z )
połączenie funkcji translateX(), translateY() oraz translateZ()
scaleZ( z )
przeskalowanie odległości elementu HTML względem wymiaru długości
scale3d( x,y,z )
połączenie funkcji scaleX(), scaleY() oraz saleZ()
rotateX( x )
obrócenie elementu HTML wokół własnej osi X
rotateY( y )
obrócenie elementu HTML wokół własnej osi Y
rotateZ( z )
obrócenie elementu HTML wokół własnej osi Z
rotate3d( x,y,z,a )
obrócenie elementu HTML w przestrzeni 3D w pewien specyficzny sposób

Poniżej zostały pokrótce omówione poszczególne funkcje właściwości transform, które służą do przekształcenia elementu HTML w przestrzeni 3D.

translateZ

translateZ( z ) - jest funkcją właściwości transform. Służy do przesunięcia elementu HTML o podaną wartość, wzdłuż prostopadłej osi Z. Jeżeli podamy ujemną wartość to element HTML zostanie przesunięty w kierunku Z- osi Z, a nie Z+ osi Z.

Przykład zaprezentowany poniżej przedstawia element HTML, który został przesunięty wzdłuż osi Z w kierunku Z+ o 100 pikseli, ponieważ do wspomnianego elementu HTML została dodana właściwość transform wraz z funkcją translateZ(100px).

Uwaga Owe przesunięcie wzdłuż osi Z odbywa się względem punktu zero danego elementu HTML.

translateZ(100px)

przekształcenie 3D CSS3 - transform translateZ(100px)

translate3d

translate3d( x,y,z ) - jest funkcją właściwości transform. Służy do przesunięcia elementu HTML o podane wartości, wzdłuż poziomej osi X, pionowej osi Y oraz prostopadłej osi Z. Zawsze należy podać wszystkie trzy parametry funkcji translate3d().

Przykład zaprezentowany poniżej przedstawia element HTML, który został przesunięty wzdłuż osi X o 50 pikseli, wzdłuż osi Y o 120 pikseli oraz wzdłuż osi Z o 100 pikseli, ponieważ do wspomnianego elementu HTML została dodana właściwość transform wraz z funkcją translate3d(50px,120px,100px).

Uwaga Owe przesunięcie wzdłuż osi X oraz osi Y oraz osi Z odbywa się względem lewej krawędzi (przesunięcie X), górnej krawędzi (przesunięcie Y) oraz punktu zero danego elementu HTML (przesunięcie Z).

translate3d(50px,120px,100px)

przekształcenie 3D CSS3 - transform translate3d(50px,120px,100px)

scaleZ

scaleZ( z ) - jest funkcją właściwości transform. Służy do przeskalowania odległości danego elementu HTML od jego pozycji początkowej w wymiarze długości (pojęcie te zostanie wyjaśnione w dalszych częściach tego działu). Jeżeli podamy wartość dziesiętną mieszczącą się w zakresie 0 - 1 dany element HTML zostanie przesunięty w kierunku Z+ na osi Z, a nie w kierunku Z-. Ujemne wartości przeskalują wspomnianą odległość w odwrotny kierunek.

Przeglądarka internetowa, aby obliczyć ostateczną wartość tworzoną przez funkcję scaleZ() korzysta z następującego wzoru: scaleZ × Z - Z, gdzie scaleZ to wartość funkcji scaleZ(), a Z to wartość przesunięcia punktu zero w przestrzeni 3D od jego pozycji początkowej.

Przykład zaprezentowany poniżej przedstawia element HTML, którego odległość od pozycji początkowej na osi Z została zmieniona, ponieważ do wspomnianego elementu HTML została dodana właściwość transform wraz z funkcją scaleZ(2).

scaleZ(2)

przekształcenie 3D CSS3 - transform scaleZ(2)

scale3d

scale3d( x,y,z ) - jest funkcją właściwości transform. Służy do przeskalowania o podane wartości następujących cech danego elementu HTML: szerokości (wzdłuż poziomej osi X względem punktu zero), wysokości (wzdłuż pionowej osi Y względem punktu zero) odległości w wymiarze długości (wzdłuż prostopadłej osi Z względem przesuniętego punktu zero w przestrzeni 3D). Zawsze należy podać wszystkie trzy parametry funkcji scale3d().

Przykład zaprezentowany poniżej przedstawia element HTML, którego szerokość została dwukrotnie zmniejszona, wysokość została czterokrotnie zmniejszona, odległość od pozycji początkowej na osi Z została odpowiednio zmieniona, ponieważ do wspomnianego elementu HTML została dodana właściwość transform wraz z funkcją scale3d(0.5,0.25,2).

scale3d(0.5,0.25,2)

przekształcenie 3D CSS3 - transform scale3d(0.5,0.25,2)

rotateX

rotateX( x ) - jest funkcją właściwości transform. Służy do obrócenia elementu HTML o podaną wartość, względem poziomej osi X. Jeżeli podamy ujemną wartość to element HTML zostanie obrócony w przeciwny kierunek. Do określenia obrócenia najlepiej wykorzystać stopnie, czyli jednostkę deg. Jeden pełen obrót to 360 stopni.

Przykład zaprezentowany poniżej przedstawia element HTML, który został obrócony względem poziomej osi X o 45 stopni, ponieważ do wspomnianego elementu HTML została dodana właściwość transform wraz z funkcją rotateX(45deg).

rotateX(45deg)

przekształcenie 3D CSS3 - transform rotateX(45deg)

rotateY

rotateY( y ) - jest funkcją właściwości transform. Służy do obrócenia elementu HTML o podaną wartość, względem pionowej osi Y. Jeżeli podamy ujemną wartość to element HTML zostanie obrócony w przeciwny kierunek. Do określenia obrócenia najlepiej wykorzystać stopnie, czyli jednostkę deg. Jeden pełen obrót to 360 stopni.

Przykład zaprezentowany poniżej przedstawia element HTML, który został obrócony względem pionowej osi Y o 15 stopni, ponieważ do wspomnianego elementu HTML została dodana właściwość transform wraz z funkcją rotateY(15deg).

rotateY(15deg)

przekształcenie 3D CSS3 - transform rotateY(15deg)

rotateZ

rotateZ( z ) - jest funkcją właściwości transform. Służy do obrócenia elementu HTML o podaną wartość, względem własnej prostopadłej osi Z. Jeżeli podamy ujemną wartość to element HTML zostanie obrócony w przeciwny kierunek. Do określenia obrócenia najlepiej wykorzystać stopnie, czyli jednostkę deg. Jeden pełen obrót to 360 stopni.

Przykład zaprezentowany poniżej przedstawia element HTML, który został obrócony względem prostopadłej osi Z o 30 stopni, ponieważ do wspomnianego elementu HTML została dodana właściwość transform wraz z funkcją rotateZ(30deg).

rotateZ(30deg)

przekształcenie 3D CSS3 - transform rotateZ(30deg)

rotate3d

rotate3d( x,y,z,a ) - jest funkcją właściwości transform. Służy do obrócenia elementu HTML o podaną wartość, względem trójwymiarowego wektora wyznaczonego przez stosunek wartości wektorów, które znajdują się na poziomej osi X, pionowej osi Y oraz prostopadłej osi Z danego elementu HTML. Jeżeli podamy ujemną wartość to element HTML zostanie obrócony w przeciwny kierunek. Zawsze należy podać cztery parametry funkcji rotate3d(). Nieco więcej o funkcji rotate3d() powiemy sobie w innej części tego działu.

Przykład zaprezentowany poniżej przedstawia element HTML, który został obrócony o 30 stopni wokół trójwymiarowego wektora (W) wyznaczonego przez stosunek wartości wektorów (w tym przykładzie: wektor na osi X reprezentuje długość 1, wektor na osi Y reprezentuje długość 1, wektor na osi Z reprezentuje długość 1), ponieważ do wspomnianego elementu HTML została dodana właściwość transform wraz z funkcją rotate3d(1,1,1,30deg).

rotate3d(1,1,1,30deg)

przekształcenie 3D CSS3 - transform rotate3d(1,1,1,30deg)

Podsumowanie

W tej części kursu CSS zostały zaprezentowane funkcje właściwości transform, które służą do przekształcenia elementu HTML w przestrzeni 3D. Aby móc z nich korzystać, element HTML musi znaleźć się w perspektywie swojej lub swojego elementu rodzica, lecz tymi zagadnieniami zajmiemy się w następnych częściach tego kursu CSS.