Kolejność wykonywania się funkcji transform CSS3 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. Dowiedzieliśmy się o istnieniu teoretycznych osi X oraz Y, punktu zero oraz pozycji początkowej elementu HTML. Wiemy również, że położenie punktu zero elementu HTML wpływa na wygląd przekształcenia wspomnianego elementu HTML, gdy skorzystamy z funkcji przekształcających właściwości transform.

Jak do tej pory podawaliśmy tylko jedną funkcję przekształcającą wraz z właściwością transform, jednak tych funkcji możemy podać więcej, wystarczy oddzielić je od siebie spacją, jednak przy podawaniu kilku funkcji przekształcających należy zwrócić uwagę na kolejność, w jakiej to uczynimy, ponieważ kolejność ta może wpłynąć na ostateczny wygląd przekształcanego elementu HTML za pomocą wspomnianych funkcji przekształcających właściwości transfom.

Przykładowo, gdy podamy jako wartość właściwości transform dwie funkcje w następującej kolejności - translateX(150px) translateY(200px) - to dany element HTML pierw zostanie przesunięty w prawą stronę od swojej lewej krawędzi o 150px wzdłuż poziomej osi X, a następnie zostanie przesunięty w dół od swojej górnej krawędzi o 200px wzdłuż pionowej osi Y.

translateX(150px) translateY(200px)

przekształcenie - translateX(150px) translateY(200px)

Natomiast, gdy nasze przykładowe funkcje przekształcające podamy w odwrotnej kolejności, czyli - translateY(200px) translateX(150px) - to dany element HTML pierw zostanie przesunięty w dół od swojej górnej krawędzi o 200px wzdłuż pionowej osi Y, a następnie zostanie przesunięty w prawą stronę od swojej lewej krawędzi o 150px wzdłuż poziomej osi X.

translateY(200px) translateX(150px)

przekształcenie - translateY(200px) translateX(150px)

Co prawda w obu przedstawionych przykładach kolejność, w jakiej podaliśmy kolejne funkcje przekształcające właściwości transform nie wpływa na ostateczny wygląd przekształcanego elementu HTML, lecz ma on wpływ na to, w jaki sposób przeglądarka internetowa może interpretować nasz zapis.

Inne kombinacje funkcji przekształcających właściwości transform oraz kolejność podania ich przez nas mogą mieć wpływ na ostateczny wygląd elementu HTML po przekształceniu go.

Przykład:

rotate(45deg) skewX(45deg)

przekształcenie - rotate(45deg) skewX(45deg)

W przykładzie zaprezentowanym powyżej nasz przykładowy element HTML został pierw obrócony o 45 stopni względem swojego punktu zero w prawą stronę (rotate(45deg)), a następnie został pochylony do osi X o 45 stopni (skewX(45deg)).

Zobaczmy co się stanie, gdy zmienimy kolejność naszych przykładowych funkcji przekształcających właściwości transform.

skewX(45deg) rotate(45deg)

przekształcenie - skewX(45deg) rotate(45deg)

Tym razem w przykładzie zaprezentowanym powyżej nasz przykładowy element HTML został pierw pochylony do osi X o 45 stopni (skewX(45deg)), a następnie został obrócony o 45 stopni względem swojego punktu zero w prawą stronę (rotate(45deg)).

Nakładając oba przykłady na siebie możemy dostrzec różnicę w ostatecznym wyglądzie przekształcanego elementu HTML.

przekształcenie - kilka jednocześnie

Oczywiście, jeżeli decydujemy się na umieszczenie elementu HTML na naszej stronie, który będzie przekształcony za pomocą funkcji przekształcających właściwości transform to z reguły nie interesuje nas, czy gdy podamy takie a nie inne funkcje, w takiej czy innej kolejności, to kąt pochylenia czy obrócenia elementu HTML zmieni się w taki, czy inny sposób, lecz interesuje nas ostateczny wygląd naszego elementu HTML, który będzie nas satysfakcjonował.

Niektóre kombinacje funkcji przekształcających mogą nieco nas zaskoczyć, ponieważ wygląd elementu HTML po przekształceniu go może nie być taki, jaki się spodziewaliśmy.

Przykładowo, gdy podamy kombinacje funkcji - translateX(180px) rotate(150deg) - to spodziewamy się, że nasz przykładowy element HTML pierw zostanie przesunięty w prawą stronę wzdłuż osi X o 180px, a następnie zostanie obrócony o 150 stopni w prawą stronę względem swojego miejsca punktu zero. Przykład zaprezentowany poniżej udowadnia nam, że rzeczywiście się tak dzieje.

translateX(180px) rotate(150deg)

przekształcenie - translateX(180px) rotate(150deg)

Natomiast, gdy odwrócimy kolejność naszych przykładowych funkcji przekształcających, czyli - rotate(150deg) translateX(180px) - to spodziewamy się, że wygląd naszego przykładowego elementu HTML po przekształceniu go będzie taki sam jak w poprzednim przykładzie, ponieważ wspomniany element HTML pierw zostanie obrócony o 150 stopni w prawą stronę względem swojego miejsca punktu zero, a następnie zostanie przesunięty w prawą stronę wzdłuż osi X o 180px. Przykład zaprezentowany poniżej udowadnia nam, że tak się nie dzieje.

rotate(150deg) translateX(180px)

przekształcenie - rotate(150deg) translateX(180px)

Aby zrozumieć czemu przeglądarka internetowa inaczej interpretuje zapis translateX(180px) rotate(150deg) od zapisu rotate(150deg) translateX(180px) musimy uświadomić sobie kolejną teoretyczną rzecz, którą poznamy w następnej części tego kursu CSS.