Manipulacja punktem zero w przestrzeni 2D

Jak do tej pory poznaliśmy funkcje właściwości transform, które służą do przekształcenia elementu HTML w przestrzeni 2D. Wiemy, że gdy przeglądarka internetowa musi wykonać przekształcenie elementu HTML w przestrzeni 2D dokonuje tej czynności przeważnie na podstawie poziomej osi X, pionowej osi Y, pozycji początkowej elementu HTML oraz jego punktu zero.

Wiemy, że te wszystkie wymienione rzeczy są tak naprawdę umownymi rzeczami, których nie możemy zobaczyć, jednak możemy sobie je (dla ułatwienia) oznaczyć, tak jak na obrazku, który został umieszczony poniżej.

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

Domyślnie oś X elementu HTML jest odsunięta od jego górnej krawędzi o 50%, dlatego wspomniana oś X przechodzi przez środek wysokości danego elementu HTML. Również domyślnie oś Y elementu HTML jest odsunięta od jego lewej krawędzi o 50%, dlatego wspomniana oś Y przechodzi przez środek szerokości danego elementu HTML. Wspomniane domyślne położenie osi X oraz osi Y tworzy domyślne położenie punktu zero, który domyślnie znajduje się na środku elementu HTML, ponieważ właśnie w tym miejscu domyślnie przecinają się oś X oraz oś Y.

Zmianę domyślnego położenia osi X oraz osi Y umożliwia nam właściwość transform-origin. Gdy zmienimy domyślne położenie osi X lub osi Y, zmieni się również domyślne położenie punktu zero danego elementu HTML.

Dlaczego jest to takie ważne?

Ponieważ niektóre funkcje przekształcające element HTML w przestrzeni 2D wykonują tą czynność na podstawie położenia opisywanego punktu zero elementu HTML, a więc gdy zmienimy domyślne miejsce punktu zero elementu HTML, zmieni się również wygląd danego elementu HTML po przekształceniu go za pomocą danej funkcji przekształcającej.

Przykładowo, gdy skorzystamy z funkcji rotate(45deg) oraz właściwości transform element HTML zostanie obrócony o 45 stopni w prawo względem domyślnego położenia swojego punktu zero, tak jak w przykładzie, który został zaprezentowany poniżej.

DIV

Spójrzmy teraz co się stanie z naszym przykładowym elementem HTML, gdy zmienimy domyślną pozycję jego osi X oraz osi Y, a co za tym idzie również miejsce przecięcia się wspomnianych osi, czyli miejsce, które wyznacza punkt zero danego elementu HTML. Opisywaną zmianę położenia osi możemy dokonać za pomocą właściwości transform-origin oraz przykładowych wartości 0 0. Pierwsza wartość właściwości transform-origin odpowiada za przesunięcie osi Y w poziomie od lewej krawędzi danego elementu HTML, natomiast druga wartość właściwości transform-origin odpowiada za przesunięcie osi X w pionie od górnej krawędzi danego elementu HTML.

DIV

Na pierwszy rzut oka możemy dostrzec niewielką różnicę wyglądu po przekształceniu naszego przykładowego elementu HTML (tak jakby element HTML został przesunięty o trochę w lewo oraz w dół), jednak zmiana ta ma duże znaczenie, o czym dowiemy się wkrótce. Spróbujmy przedstawić graficznie to co się stało z naszymi dwoma poprzednimi przykładami.

przekształcony element HTML - przykład 1

Nasz pierwszy przykładowy element div został wyświetlony w przeglądarce internetowej. Wspomniany element div został wyśrodkowany. Oś X oraz oś Y znajdują się na domyślnych pozycjach, dzięki czemu punkt zero danego elementu HTML znajduje się w jego domyślnej centralnej części.

rotate(45deg)

przekształcony element HTML - przykład 2

Do przykładowego elementu div została dodana właściwość transform wraz z wartością rotate(45deg), dzięki czemu dany element HTML został obrócony o 45 stopni w prawą stronę wokół własnego punktu zero, czyli miejsca przecięcia się osi X oraz osi Y.

przekształcony element HTML - przykład 3

Nasz drugi przykładowy element div został wyświetlony w przeglądarce internetowej. Wspomniany element div został wyśrodkowany. Oś X oraz oś Y znajdują się na domyślnych pozycjach, dzięki czemu punkt zero danego elementu HTML znajduje się w jego domyślnej centralnej części.

transform-origin:0 0;

przekształcony element HTML - przykład 4

Do przykładowego elementu div została dodana właściwość transform-origin wraz z wartościami 0 0, dzięki czemu oś X danego elementu HTML nie została odsunięta o żadną wartość od górnej krawędzi wspomnianego elementu HTML, jak również oś Y danego elementu HTML nie została odsunięta o żadną wartość od lewej krawędzi wspomnianego elementu HTML, dlatego nowym miejscem przecięcia się obu osi jest lewy górny róg opisywanego elementu HTML, dzięki czemu punkt zero danego elementu HTML znajduje się w lewym górnym rogu wspomnianego elementu HTML.

rotate(45deg)

przekształcony element HTML - przykład 5

Do przykładowego elementu div została dodana właściwość transform wraz z wartością rotate(45deg), dzięki czemu dany element HTML został obrócony o 45 stopni w prawą stronę wokół własnego punktu zero, który tym razem został przez nas ustawiony w lewym górnym rogu danego elementu HTML za pomocą właściwości transform-origin oraz wartości 0 0.

Różnica pomiędzy dwoma przedstawionymi przykładami może wydawać się niewielka, lecz ma ona duże znaczenie, co najłatwiej zauważyć na animacjach, które zostały zaprezentowane poniżej.

transform-origin:50% 50%;

DIV
przekształcony element HTML - przykład 6

transform-origin:0 0;

DIV
przekształcony element HTML - przykład 7

Obie wyżej przedstawione animacje prezentują obrót elementu HTML o 360 stopni względem jego punktu zero w prawą stronę, jednak druga z naszych przykładowych animacji wygląda zupełnie inaczej niż pierwsza z nich, ponieważ domyślna pozycja punktu zero danego animowanego elementu HTML została zmieniona. W tym wypadku wspomniany punkt zero został przesunięty do lewego górnego rogu danego animowanego elementu HTML za pomocą właściwości transform-origin oraz wartości 0 0.

Miejsce punktu zero elementu HTML ma również znaczenie dla niektórych pozostałych funkcji przekształcających w przestrzeni 2D właściwości transform, np. dla funkcji skalującej element HTML (scaleX, scaleY, scale), czy też funkcji pochylającej element HTML (skewX, skewY, skew).

scaleX(2)

przekształcony element HTML - przykład 8

Nasz przykładowy element HTML został przekształcony za pomocą funkcji scaleX(2), dlatego jego rozmiar szerokości został dwukrotnie powiększony poprzez rozciągnięcie wzdłuż poziomej osi X. Wspomniane rozciągnięcie odbywa się względem miejsca punktu zero danego elementu HTML, które w tym wypadku znajduje się w domyślnym miejscu, czyli w centralnej części elementu HTML, dlatego zarówno po lewej i prawej stronie od punktu zero na poziomej osi X widzimy równomierne rozciągnięcie elementu HTML, tak więc zaznaczone przeze mnie odcinki LX (lewe rozciągnięcie X) oraz PX (prawe rozciągnięcie X) są sobie równe.

Zobaczmy co się stanie z naszym przykładowym przekształconym elementem HTML, gdy zmienimy miejsce jego punktu zero, np. umieścimy je 25% od lewej krawędzi danego elementu HTML, czyli przesuniemy oś Y w poziomie o 25% od lewej krawędzi wspomnianego elementu HTML za pomocą właściwości transform-origin oraz wartości 25% 50% (oś X zostawiamy w domyślnym miejscu, czyli odsuniętą od górnej krawędzi elementu HTML o wartość 50%, stąd też wartość 50% w naszym zapisie).

scaleX(2)

przekształcony element HTML - przykład 9

Tym razem nasz przykładowy element HTML również został przekształcony za pomocą funkcji scaleX(2), dlatego jego rozmiar szerokości został dwukrotnie powiększony poprzez rozciągnięcie wzdłuż poziomej osi X. Wspomniane rozciągnięcie odbywa się względem miejsca punktu zero danego elementu HTML, które tym razem znajduje się w innym miejscu niż poprzednio, czyli 25% w poziomie od lewej krawędzi danego elementu HTML, dzięki właściwości transform-origin oraz wartości 25% 50%, dlatego tym razem po lewej i prawej stronie od punktu zero na poziomej osi X widzimy nierównomierne rozciągnięcie elementu HTML, tak więc tym razem zaznaczone przeze mnie odcinki LX oraz PX nie są sobie równe.

Animacje znajdujące się poniżej mogą nam nieco ułatwić zrozumienie różnicy wyglądu elementu HTML po przekształceniu go za pomocą funkcji skalującej, np. funkcji scaleX() (gdy zaczniemy manipulować domyślnym położeniem punktu zero wspomnianego elementu HTML).

transform-origin:50% 50%;

DIV
przekształcony element HTML - przykład 10

transform-origin:25% 50%;

DIV
przekształcony element HTML - przykład 11

transform-origin:0 50%;

DIV
przekształcony element HTML - przykład 12

transform-origin:100% 50%;

DIV
przekształcony element HTML - przykład 13

Wszystkie wyżej zaprezentowane animacje powiększają dwukrotnie rozmiar szerokości elementu HTML za pomocą funkcji scaleX(2). Powiększenie szerokości odbywa się poprzez rozciągnięcie w poziomie wzdłuż osi X danego elementu HTML oraz jego miejsca punktu zero. Gdy zmienimy miejsce osi Y, czyli odsuniemy ją w poziomie od lewej krawędzi elementu HTML za pomocą właściwości transform-origin, zmieni się również miejsce punktu zero w poziomie danego elementu HTML, a wygląd wspomnianego elementu w momencie przekształcenia go za pomocą funkcji scaleX() zmieni się.

Podobne zasady tyczą się funkcji scaleY(), jednak skalowanie odbywa się w pionie, a wygląd przekształcenia elementu HTML zmieni się, gdy zaczniemy manipulować położeniem osi X od górnej krawędzi elementu HTML za co odpowiada druga z wartości, jakie możemy podać wraz z właściwością transfrom-origin.

Poniżej znajdują się animacje, które tym razem dotyczą pochylenia elementu HTML względem osi X za pomocą funkcji skewX().

transform-origin:50% 50%;

DIV
przekształcony element HTML - przykład 14

transform-origin:50% 25%;

DIV
przekształcony element HTML - przykład 15

transform-origin:50% 0;

DIV
przekształcony element HTML - przykład 16

transform-origin:50% 100%;

DIV
przekształcony element HTML - przykład 17

Wszystkie wyżej zaprezentowane animacje pochylają element HTML do osi X o 60 stopni względem miejsca punktu zero danego elementu HTML za pomocą funkcji skewX(60deg). Wygląd przekształcenia elementu HTML tym razem możemy kontrolować za pomocą manipulacji osią X, której zmiana odległości od górnej krawędzi danego elementu HTML zmienia również położenie w pionie punktu zero wspomnianego elementu HTML.

Podobne zasady tyczą się również funkcji skewY(), jednak to zmiana położenia osi Y od lewej krawędzi danego elementu HTML będzie miała wpływ na ostateczny wygląd przekształcenia danego elementu HTML.

Jeżeli chodzi o funkcję translateX() oraz funkcję translateY(), które służą do przesunięcia w poziomie bądź w pionie elementu HTML, to miejsce punktu zero danego elementu HTML nie wpływa na zmianę wyglądu wspomnianego przekształcenia, ponieważ przekształcenie za pomocą funkcji translateX() odbywa się zawsze względem położenia lewej krawędzi danego elementu HTML, natomiast przekształcenie za pomocą funkcji translateY() odbywa się zawsze względem położenia górnej krawędzi danego elementu HTML, a nie położenia jego punktu zero.

transform-origin:50% 50%;

DIV
przekształcony element HTML - przykład 10

transform-origin:25% 50%;

DIV
przekształcony element HTML - przykład 11

transform-origin:0 50%;

DIV
przekształcony element HTML - przykład 12

transform-origin:100% 50%;

DIV
przekształcony element HTML - przykład 13

Wszystkie wyżej zaprezentowane animacje udowadniają nam, że zmiana położenia punktu zero w poziomie danego elementu HTML nie wpływa na ostateczny wygląd przekształcenia wspomnianego elementu HTML, gdy skorzystamy z funkcji przekształcającej translateX(), w tym wypadku translateX(200px).

Element HTML możemy również przekształcić za pomocą kilku funkcji przekształcających na raz, lecz tym zagadnieniem zajmiemy się w następnej części tego kursu CSS.