Wewnętrzny kierunek elementu HTML w przestrzeni 2D

Gdy poznawaliśmy funkcję translateX() właściwości transform dowiedzieliśmy się, że funkcja translateX() służy do przesunięcie elementu HTML w prawą stronę od lewej krawędzi danego elementu HTML wzdłuż jego poziomej osi X (gdy podamy wartość dodatnią).

Jest to prawdą, lecz cały proces odbywa się nieco inaczej, ponieważ to w którą stronę element HTML zostanie przesunięty o podaną przez nas wartość jest uzależnione od rzeczy, którą możemy nazwać wewnętrznym kierunkiem X elementu HTML.

wewnętrzne kierunki 2D elementu HTML

Na obrazku zaprezentowanym powyżej wewnętrzny kierunek X elementu HTML został zaznaczony dużą pogrubioną zieloną strzałką. Kierunek X elementu HTML zawsze jest liczony od lewej krawędzi elementu HTML. Domyślnie kierunek X elementu HTML wskazuje na poziomą oś X danego elementu HTML.

Spójrzmy na przykładowy element HTML, w którym dodatkowo został oznaczony wewnętrzny kierunek X.

wewnętrzny kierunek X elementu HTML

Wewnętrznym kierunkiem X elementu HTML możemy manipulować, np. za pomocą funkcji rotate() właściwości transform.

Zobaczmy co się stanie z naszym przykładowym elementem div, gdy dodamy do niego właściwość transform wraz z funkcją rotate(45deg).

rotate(45deg)

przekształcenie - rotate(45deg)

Nasz przykładowy element div został obrócony w prawą stronę o 45 stopni, dzięki funkcji rotate(45deg) oraz właściwości transform, jednak nie to jest najważniejsze do zauważenia w zaprezentowanym przykładzie. Najważniejsze jest to, iż wewnętrzny kierunek X danego elementu HTML został również obrócony o 45 stopni w prawo tak samo jak lewa krawędź naszego przykładowego elementu HTML.

Zobaczmy co się stanie z naszym przykładowym elementem HTML, gdy dodamy do niego następującą kombinację funkcji: rotate(45deg) translateX(200px).

rotate(45deg) translateX(200px)

przekształcenie - rotate(45deg) translateX(200px)

Nasz przykładowy element div pierw został obrócony w prawą stronę o 45 stopni, dzięki funkcji rotate(45deg), a następnie został przesunięty o 200px (dzięki funkcji translateX(200px)) od swojej lewej krawędzi w stronę wyznaczoną przez swój wewnętrzny kierunek X. Cały proces przesunięcie o 200px w stronę wyznaczoną przez wewnętrzny kierunek X danego elementu HTML został oznaczony na obrazku, który znajduje się poniżej.

rotate(45deg) translateX(200px)

przekształcenie - rotate(45deg) translateX(200px)

Wewnętrzny kierunek X elementu HTML ulega również zmianie w przestrzeni 2D, gdy skorzystamy z funkcji skewY(), która pochyla element HTML do osi Y o podaną przez nas wartość, a co za tym idzie wewnętrzny kierunek X danego elementu HTML również ulega pochyleniu.

Przykład:

skewY(30deg) translateX(200px)

przekształcenie - skewY(30deg) translateX(200px)

Nasz przykładowy element div tym razem pierw został pochylony o 30 stopni do pionowej osi Y za pomocą funkcji skewY(30deg), a następnie został przesunięty za pomocą funkcji translateX(200px) o 200 pikseli od swojej lewej krawędzi w stronę wyznaczoną przez wewnętrzny kierunek X wspomnianego elementu HTML. Tym razem przesunięcie o 200px nie odbywa się dokładnie wzdłuż linii, którą wyznacza wewnętrzny kierunek X elementu HTML, lecz w poziomie od lewej krawędzi danego elementu HTML, który dodatkowo jest ostatecznie pochylony o 30 stopni do pionowej osi Y.

Oprócz wewnętrznego kierunku X elementu HTML, element HTML posiada swój wewnętrzny kierunek Y, który jak łatwo się domyśleć jest liczony od górnej krawędzi wspomnianego elementu HTML oraz domyślnie wskazuje on na pionową oś Y danego elementu HTML. Oba wewnętrzne kierunki X oraz Y zostały zaprezentowane na obrazku, który znajduje się poniżej.

wewnętrzne kierunki 2D elementu HTML

Na podstawie wewnętrznego kierunku Y elementu HTML jest wykonywane przesunięcie za pomocą funkcji translateY() właściwości transform. Wewnętrznym kierunkiem Y elementu HTML możemy manipulować za pomocą funkcji rotate() podobnie jak to miało miejsce w przypadku wewnętrznego kierunku X elementu HTML. Ponadto funkcja skewX() również wpływa na to, w którą stronę zostanie przesunięty element HTML za pomocą funkcji translateY() (jeżeli funkcję skewX() podamy przed funkcją translateY() w naszym zapisie).

W następnej części kursu CSS rozpoczniemy temat przekształceń elementu HTML w przestrzeni 3D.