Autor publikacji: Virtual Patriot - Administrator

Przekształcenie elementu HTML w przestrzeni 2D - transform CSS3

Data publikacji: Wrzesień 01 2013
Ostatnio edytowano: Wrzesień 07 2020

Zastanów się co możesz zrobić z kartką papieru, w realnym świecie, która leży na Twoim biurku? W jaki sposób możesz zmienić jej pozycję, nie odrywając jej od Swojego biurka?

Możesz ją przesunąć w prawo, w lewo, w górę, w dół, możesz ją również obrócić wokół własnej osi, w prawą lub lewą stronę, możesz również wykonać te wszystkie czynności naraz.

Podobne czynności możemy wykonać z elementem HTML, w świecie wirtualnym.

Właściwość transform została dodana do języka CSS po to, abyśmy mogli przekształcać element HTML w przestrzeni 2D oraz 3D. Przekształceniami w przestrzeni 3D zajmiemy się nieco później, w innej części tego działu, natomiast w tej części kursu CSS poznamy funkcje właściwości transform, które służą do przekształcenia elementu HTML w przestrzeni 2D.

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

translateX( x ): przesunięcie elementu HTML w prawą lub lewą stronę od jego pozycji początkowej
translateY( y ): przesunięcie elementu HTML w dół lub w górę od jego pozycji początkowej
translate( x,y ): połączenie funkcji translateX() oraz translateY()
scaleX( x ): przeskalowanie, czyli powiększenie lub pomniejszenie aktualnej szerokości elementu HTML (poprzez zwężenie lub rozciągnięcie)
scaleY( y ): przeskalowanie, czyli powiększenie lub pomniejszenie aktualnej wysokości elementu HTML (poprzez zwężenie lub rozciągnięcie)
scale( x,y ): połączenie funkcji scaleX() oraz scaleY()
skewX( x ): pochylenie elementu HTML w prawą lub lewą stronę do osi X, czyli do poziomu
skewY( y ): pochylenie elementu HTML w dół lub w górę do osi Y, czyli do pionu
skew( x,y ): połączenie funkcji skewX() oraz skewY()
rotate( a ): obrócenie elementu HTML w prawą lub lewą stronę wokół własnego punktu zero

W poprzedniej części kursu CSS utworzyliśmy przykładowy element div, który jeszcze raz został zaprezentowany pod spodem.

W poprzedniej części kursu CSS wyjaśniliśmy sobie również czym jest: pozioma oś X, pionowa oś Y, punkt zero, pozycja początkowa elementu HTML.

Wspomniane rzeczy są czymś umownym, czymś co możemy zobaczyć jedynie oczami naszej wyobraźni lub naszymi zwykłymi oczami, jeżeli zaznaczymy je sobie tak, jak na obrazku, który został umieszczony poniżej.

oś X oś Y punkt zero oraz pozycja początkowa elementu HTML

Dodatkowe oznaczenia typu X-, X+, Y-, Y+, które pojawiły się na obrazku służą do oznaczenia wartości ujemnych oraz dodatnich po obu stronach osi X oraz osi Y. Warto zauważyć, iż w świecie wirtualnym dodatnie wartości na pionowej osi Y znajdują się pod poziomą osią X, a nie nad.

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 2D.

translateX

translateX( x ) - jest funkcją właściwości transform. Służy do przesunięcia elementu HTML o podaną wartość, wzdłuż poziomej osi X. Jeżeli podamy ujemną wartość to element HTML zostanie przesunięty nie w prawą, a w lewą stronę, wzdłuż własnej osi X.

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

Uwaga Owe przesunięcie wzdłuż osi X odbywa się względem lewej krawędzi danego elementu HTML.

Uwaga Gdy korzystamy z właściwości transform oraz funkcji translateX() wartości procentowe są liczone względem rozmiaru szerokości przesuwanego elementu HTML, a nie jego rodzica.

translateY

translateY( y ) - jest funkcją właściwości transform. Służy do przesunięcia elementu HTML o podaną wartość, wzdłuż pionowej osi Y. Jeżeli podamy ujemną wartość to element HTML zostanie przesunięty nie w dół, lecz w górę, wzdłuż własnej osi Y.

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

Uwaga Owe przesunięcie wzdłuż osi Y odbywa się względem górnej krawędzi danego elementu HTML.

Uwaga Gdy korzystamy z właściwości transform oraz funkcji translateY() wartości procentowe są liczone względem rozmiaru wysokości przesuwanego elementu HTML, a nie jego rodzica.

translate

translate( x,y ) - jest funkcją właściwości transform. Służy do przesunięcia elementu HTML o podane wartości, wzdłuż poziomej osi X oraz pionowej osi Y. Jeżeli podamy jedną wartość to przesunięcie wykona się tylko wzdłuż osi X.

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

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

Uwaga Gdy korzystamy z właściwości transform oraz funkcji translate() wartości procentowe są liczone względem rozmiaru szerokości oraz wysokości przesuwanego elementu HTML, a nie jego rodzica.

scaleX

scaleX( x ) - jest funkcją właściwości transform. Służy do przeskalowania elementu HTML (rozciągnięcia lub zwężenia) o podaną wartość, wzdłuż poziomej osi X względem punktu zero. Liczba 1 oznacza domyślny rozmiar szerokości elementu HTML. Liczba 2 oznacza dwukrotnie większy rozmiar szerokości elementu. Liczba 3 oznacza trzykrotnie większy rozmiar szerokości elementu itd. Liczby dziesiętne są dozwolone. Liczby dziesiętne mieszczące się w przedziale 0 - 1 pomniejszą rozmiar szerokości elementu, np. liczba 0.5. Ujemne wartości przeskalują element HTML w odwrotny kierunek.

Przykład zaprezentowany poniżej przedstawia element HTML, którego szerokość została dwukrotnie powiększona (rozciągnięta) wzdłuż własnej osi X względem punktu zero, ponieważ do wspomnianego elementu HTML została dodana właściwość transform wraz z funkcją scaleX(2).

Uwaga Podczas skalowania elementu HTML dochodzi do rozciągnięcia lub zwężenia jego rozmiarów, rozciągnięciu lub zwężeniu ulega również jego zawartość, która przez ten proces może ulec zniekształceniom (pogorszeniu jej wizualnego wyglądu).

scaleY

scaleY( y ) - jest funkcją właściwości transform. Służy do przeskalowania elementu HTML (rozciągnięcia lub zwężenia) o podaną wartość, wzdłuż pionowej osi Y względem punktu zero. Liczba 1 oznacza domyślny rozmiar wysokości elementu HTML. Liczba 2 oznacza dwukrotnie większy rozmiar wysokości elementu. Liczba 3 oznacza trzykrotnie większy rozmiar szerokości elementu itd. Liczby dziesiętne są dozwolone. Liczby dziesiętne mieszczące się w przedziale 0 - 1 pomniejszą rozmiar wysokości elementu, np. liczba 0.5. Ujemne wartości przeskalują element HTML w odwrotny kierunek.

Przykład zaprezentowany poniżej przedstawia element HTML, którego wysokość została rozciągnięta wzdłuż własnej osi Y względem punktu zero, ponieważ do wspomnianego elementu HTML została dodana właściwość transform wraz z funkcją scaleY(2.5).

scale

scale( x,y ) - jest funkcją właściwości transform. Służy do przeskalowania elementu HTML (rozciągnięcia lub zwężenia) o podane wartości, wzdłuż poziomej osi X względem punktu zero oraz wzdłuż pionowej osi Y względem punktu zero. Jeżeli podamy jedną wartość to przeskalowanie dokona się zarówno wzdłuż osi X jak i wzdłuż osi Y.

Przykład zaprezentowany poniżej przedstawia przeskalowany element HTML wzdłuż obu osi względem punktu zero, ponieważ do wspomnianego elementu HTML została dodana właściwość transform wraz z funkcją scale(2,2.5).

skewX

skewX( x ) - jest funkcją właściwości transform. Służy do pochylenia elementu HTML o podaną wartość, do poziomej osi X względem punktu zero. Jeżeli podamy ujemną wartość to element HTML zostanie pochylony w odwrotny kierunek. Do określenia pochylenia najlepiej wykorzystać stopnie, czyli jednostkę deg.

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

skewY

skewY( y ) - jest funkcją właściwości transform. Służy do pochylenia elementu HTML o podaną wartość, do pionowej osi Y względem punktu zero. Jeżeli podamy ujemną wartość to element HTML zostanie pochylony w odwrotny kierunek. Do określenia pochylenia najlepiej wykorzystać stopnie, czyli jednostkę deg.

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

skew

skew( x,y ) - jest funkcją właściwości transform. Służy do pochylenia elementu HTML o podane wartości, do poziomej osi X względem punktu zero oraz do pionowej osi Y względem punktu zero. Jeżeli podamy jedną wartość to pochylenie dokona się tylko względem osi X.

Przykład zaprezentowany poniżej przedstawia element HTML, który został pochylony do obu osi na raz względem punktu zero, ponieważ do wspomnianego elementu HTML została dodana właściwość transform wraz z funkcją skew(45deg,30deg).

Uwaga Funkcja skew() przekształca element HTML według własnego stylu, co oznacza że zapis skew(45deg,30deg) oraz zapis skewX(45deg) skewY(30deg) nie dadzą w tym wypadku tego samego rezultatu. Dla właściwości transfrom możemy podać kilka funkcji przekształcających oddzielonych od siebie spacją jednak tym zagadnieniem zajmiemy się w innej części tego kursu CSS.

rotate

rotate( a ) - jest funkcją właściwości transform. Służy do obrócenia elementu HTML o podaną wartość względem punktu zero. Jeżeli podamy ujemną wartość to element HTML zostanie obrócony w lewą, a nie w prawą stronę, wokół punktu zero. 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 w prawą stronę wokół własnego punktu zero o 60 stopni, ponieważ do wspomnianego elementu HTML została dodana właściwość transform wraz z funkcją rotate(60deg).

Podsumowanie

W tej części kursu CSS zostały przedstawione różne dostępne funkcje właściwości transform, które służą do przekształcenia elementu HTML w przestrzeni 2D. Wygląd elementu HTML, po przekształceniu go za pomocą wspomnianych funkcji 2D, zmienia się nieco, gdy zaczniemy manipulować domyślnym położeniem punktu zero, dlatego tym zagadnieniem zajmiemy się w następnej części tego kursu CSS.