Wewnętrzny kierunek elementu HTML w przestrzeni 2D
- Data publikacji
- Ostatnio edytowano
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.

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ę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)

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)

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)

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)

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.

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.