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

Przyszedł czas na to, abyśmy poznali czym są przekształcenia elementu HTML w przestrzeni 2D oraz 3D. Temat ten jest dosyć skomplikowany, ponieważ będziemy musieli poznać wiele zależności pomiędzy elementami HTML oraz właściwościami CSS, które wpływają na wygląd elementu HTML w przestrzeni 2D oraz 3D, dlatego temat ten zostanie rozbity na kilka części, dzięki czemu będziemy mogli przyjrzeć się dokładniej każdemu zagadnieniu.

W realnym świecie, gdy widzimy jakiś przedmiot, np. kartkę papieru, która leży na naszym biurku, to możemy wziąć ją do naszej ręki, zmienić jej pozycję, obrócić ją w różne strony, przybliżyć lub oddalić ją od naszego wzroku lub wykonać te wszystkie czynności na raz, bez żadnych przeszkód.

W świecie wirtualnym, w języku HTML i CSS, czynność ta jest nieco bardziej skomplikowana, ponieważ nasze elementy HTML znajdują się na ekranie naszego urządzenia, lecz nie możemy ich tak po prostu wziąć do ręki i zmienić ich pozycji, obrócić ich, czy przybliżyć ich do naszego wzroku.

Do tych wszystkich wyżej wymienionych czynności i nie tylko, służą takie właściwości CSS jak: transform, transform-origin, transform-style, backface-visibility, perspective, perspective-origin.

Zanim poznamy do czego służą wyżej wymienione właściwości CSS i jak należy z nich korzystać, musimy wyjaśnić sobie kilka umownych rzeczy, których nie zobaczymy, lecz które musimy starać się sobie wyobrazić, dzięki czemu zrozumienie przekształceń w przestrzeni 2D oraz 3D stanie się banalnie proste.

Naszą przygodę z przekształceniami w języku CSS zaczniemy od przekształceń w przestrzeni 2D, dlatego musimy sobie wyjaśnić, czym jest pozycja początkowa elementu HTML, oś X, oś Y, punkt zero, przestrzeń 2D.

Pozycja początkowa elementu HTML w kontekście przekształceń w przestrzeni 2D oraz 3D
Pozycją początkową elementu HTML jest ta pozycja, którą zajmuje dany element HTML po wyświetleniu go w oknie naszej przeglądarki internetowej. Jest to obszar, który zajmuje dany element HTML w danym miejscu okna naszej przeglądarki internetowej przed jakimkolwiek przekształceniu go w przestrzeni 2D lub 3D.
Oś X
Oś X, tak jak w matematyce, jest osią poziomą.

Domyślnie oś X przechodzi przez środek wysokości elementu HTML. Oś X wyznacza wymiar szerokości w przestrzeni 2D oraz 3D.
Oś Y
Oś Y, tak jak w matematyce, jest osią pionową.

Domyślnie oś Y przechodzi przez środek szerokości elementu HTML. Oś Y wyznacza wymiar wysokości w przestrzeni 2D oraz 3D.
Punkt zero
Miejsce przecięcia się poziomej osi X oraz pionowej osi Y w przestrzeni 2D wyznacza tak zwany punkt zero. Domyślnie wspomniany punkt zero znajduje się w centralnej części elementu HTML, czyli na jego środku.
Przestrzeń 2D
Przestrzeń 2D jest płaskim obszarem, który posiada swoją szerokość oraz wysokość. Obszar ten możemy określić za pomocą poziomej osi X oraz pionowej osi Y. W obrębie wspomnianego obszaru możemy dokonać przekształcenia elementu HTML w przestrzeni 2D, np. przesunąć element wzdłuż osi X lub osi Y lub obu osi na raz, przeskalować element, pochylić element, obrócić element. Teoretycznie obszar przestrzeni 2D jest nieograniczony.

Pozycja początkowa, oś X, oś Y, punkt zero są rzeczami, dzięki którym przeglądarka internetowa wie w jaki sposób wykonać przekształcenie elementu HTML w przestrzeni 2D, jeżeli poprosimy ją o to, za pomocą właściwości transform oraz różnych funkcji wspomnianej właściwości transform, które niebawem poznamy.

Spójrzmy na przykładowy element HTML.

Nasz przykładowy element HTML zawiera w sobie kilka znanych nam właściwości CSS.

div {
  width:120px;
  height:120px;
  border:3px solid gold;
  margin:0 auto;
}

A teraz spójrzmy, w jaki sposób przeglądarka internetowa widzi pozycję początkową danego elementu HTML.

pozycja początkowa elementu HTML

Pozycja początkowa elementu HTML to po prostu obszar, jaki zajmuje nasz przykładowy element HTML. Czyli w tym wypadku obszar o szerokości 120px, wysokości 120px, który jest wyśrodkowany (a raczej szerokości 126px oraz wysokości 126px ze względu na trzy pikselowe obramowanie naszego przykładowego elementu HTML, które znajduje się po każdej stronie wspomnianego elementu HTML).

Spójrzmy gdzie znajduje się oś X danego elementu HTML. Jak przeglądarka internetowa "widzi" wspomnianą poziomą oś X.

pozioma oś X elementu HTML w przestrzeni 2D

Domyślnie pozioma oś X przechodzi przez środek wysokości obszaru danego elementu HTML, czyli przez środek wysokości pozycji początkowej wspomnianego elementu HTML.

Spójrzmy gdzie znajduje się oś Y danego elementu HTML. Jak przeglądarka internetowa "widzi" wspomnianą pionową oś Y.

pionowa oś Y elementu HTML w przestrzeni 2D

Domyślnie pionowa oś Y przechodzi przez środek szerokości obszaru danego elementu HTML, czyli przez środek szerokości pozycji początkowej wspomnianego elementu HTML.

Obie zaprezentowane osie, a raczej ich miejsce przecięcia się tworzy punkt zero, który "widzi" przeglądarka internetowa, oraz który został przedstawiony poniżej.

punkt zero elementu HTML w przestrzeni 2D

Względem poziomej osi X, pionowej osi Y oraz punktu zero elementu HTML dokonywane są przekształcenia w przestrzeni 2D za pomocą różnych funkcji właściwości transform. Wspomnianą przestrzeń 2D wyznacza pozioma oś X oraz pionowa oś Y. Przestrzeń 2D należy rozumieć jako płaski obszar, na którym możemy przekształcić dany element HTML, czyli zmienić jego wygląd, rozmiar, czy też jego pozycję początkową o czym była już mowa wcześniej.

Spójrzmy co się stanie z naszym przykładowym elementem HTML, gdy dodamy do niego właściwość transform wraz z wartością rotate(30deg), czyli funkcją rotate().

Nasz przykładowy element HTML został obrócony o 30deg w prawo, czyli o 30 stopni, dzięki właściwości transform oraz funkcji rotate(30deg), która jest wartością wspomnianej właściwości transform.

Jeżeli chcemy bardziej zrozumieć owe obrócenie o 30deg w prawo należy uwzględnić poziomą oś X, pionową oś Y, punkt zero oraz pozycję początkową elementu HTML. Spójrzmy poniżej.

rotate(30deg)

obrót w prawo elementu HTML

Na rysunku przedstawionym powyżej możemy dostrzec, w jaki sposób przeglądarka internetowa dokonuje przekształcenia w przestrzeni 2D elementu HTML, gdy skorzystamy z właściwości transform oraz funkcji rotate(30deg). Nasz przykładowy element HTML został przekształcony, czyli w tym wypadku został obrócony w prawą stronę o 30deg od swojej pozycji początkowej względem punktu zero, który został wyznaczony przez poziomą oś X oraz pionową oś Y.

Kod dokumentu HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      div {
        width:120px;
        height:120px;
        border:3px solid gold;
        margin:0 auto;
        transform:rotate(30deg);
        -webkit-transform:rotate(30deg); /* dla Google Chrome, Safari, Opera */
      }
    </style>
  </head>

  <body>

    <div></div>

  </body>
</html>

Oczywiście funkcja rotate() to nie jedyna funkcja, dzięki której możemy dokonywać przekształceń elementu HTML w przestrzeni 2D. O wiele więcej funkcji właściwości transform poznamy w następnej części tego kursu CSS.