Wpływ pozycji początkowej elementu HTML na jego wygląd po przekształceniu

W jednej z poprzednich części kursu CSS dowiedzieliśmy się, że gdy zaczniemy manipulować miejscem punktu środka perspektywy to wygląd przekształconego w przestrzeni 3D elementu HTML może ulec zmianie. Podobna sytuacja ma miejsce, gdy kilka przekształconych w przestrzeni 3D elementów HTML znajduje się w zasięgu tej samej perspektywy, a pozycja początkowa każdego ze wspomnianych elementów HTML znajduje się w różnych miejscach względem punktu środka wspomnianej perspektywy.

Aby nieco bardziej zrozumieć opisaną zasadę utwórzmy przykładowy układ elementów HTML, który podobnie jak w poprzednich częściach tego kursu CSS będzie opierał się na relacji pomiędzy elementami HTML wyświetlonymi w pozycji absolutnej oraz elementem HTML wyświetlonym w pozycji relatywnej.

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

    <style>
      #rodzic {
        position:relative;
        height:400px;
        background-color:black;
      }

      #rodzic > div {
        position:absolute;
        width:150px;
        height:100px;
        line-height:100px;
        font-size:26px;
        text-align:center;
        color:white;
        background-color:red;
      }

      #dziecko1 {
        top:30px;
        left:30px;
      }

      #dziecko2 {
        top:150px;
        left:30px;
      }

      #dziecko3 {
        bottom:30px;
        left:30px;
      }

      #dziecko4 {
        top:30px;
        right:30px;
      }

      #dziecko5 {
        top:150px;
        right:30px;
      }

      #dziecko6 {
        bottom:30px;
        right:30px;
      }
    </style>
  </head>

  <body>

    <div id="rodzic">
      <div id="dziecko1">1</div>
      <div id="dziecko2">2</div>
      <div id="dziecko3">3</div>
      <div id="dziecko4">4</div>
      <div id="dziecko5">5</div>
      <div id="dziecko6">6</div>
    </div>

  </body>
</html>

Rezultat:

1
2
3
4
5
6

Nasz układ elementów HTML prezentuje sześć elementów div, które są dziećmi jednego tego samego elementu div, czyli elementu #rodzic. Wspomniane elementy dzieci są elementami wyświetlonymi w pozycji absolutnej oraz zostały odpowiednio rozmieszczone względem swojego pozycjonowanego relatywnie elementu rodzica, dzięki takim właściwościom jak: top, right, bottom, left.

Spróbujmy sprawić, aby element #rodzic tworzył perspektywę dla swoich elementów dzieci. Jak wiemy efekt ten możemy uzyskać za pomocą, na przykład właściwości perspective.

#rodzic {
  perspective:300px;
  position:relative;
  height:400px;
  background-color:black;
}

Rezultat:

1
2
3
4
5
6

Wygląd naszych przykładowych elementów HTML nie uległ zmianie, jednak od tej pory po dodaniu do elementu #rodzic właściwości perspective wraz z wartością 300px możemy powiedzieć, że wszystkie elementy dzieci elementu #rodzic znajdują się w zasięgu jednej i tej samej perspektywy, którą tworzy element #rodzic, oraz której wartość wynosi 300px.

Domyślnie punkt środka perspektywy znajduje się na środku elementu HTML, który tworzy daną perspektywę, a więc w naszym przykładzie punkt środka perspektywy tworzonej przez element #rodzic znajduje się na środku wspomnianego elementu #rodzic, czyli w miejscu przecięcia się poziomej osi X oraz pionowej osi Y.

Warto również zauważyć, iż pozycja początkowa każdego elementu dziecka elementu #rodzic znajduje się w różnym miejscu względem punktu środka perspektywy tworzonej przez element #rodzic, dlatego zobaczmy jak będą wyglądać nasze przykładowe elementy dzieci, gdy dodamy do nich jedną i tą samą funkcję przekształcającą właściwości transform, np. funkcję rotateY() wraz z wartością 30deg.

#rodzic > div {
  position:absolute;
  width:150px;
  height:100px;
  line-height:100px;
  font-size:26px;
  text-align:center;
  color:white;
  background-color:red;
  transform:rotateY(30deg);
}

Rezultat:

1
2
3
4
5
6

Każdy element dziecko elementu #rodzic w naszym przykładowym układzie elementów HTML znajduje się w zasięgu jednej i tej samej perspektywy oraz został przekształcony za pomocą tej samej funkcji przekształcającej właściwości transform wraz z tą samą wartością, jednak wygląd każdego ze wspomnianych elementów dzieci elementu #rodzic różni się od pozostałych. Dzieje się tak, ponieważ pozycja początkowa każdego z interesujących nas elementów dzieci elementu #rodzic znajduje się w zupełnie innym miejscu względem punktu środka perspektywy wspomnianego elementu #rodzic.

To tak gdybyśmy po prawej stronie naszego wzroku umieścili trzy takie same przedmioty oraz po lewej stronie naszego wzroku umieścili trzy takie same przedmioty, a następnie wszystkie przedmioty obrócilibyśmy o tą samą wartość, dzięki czemu otrzymalibyśmy obraz, który przedstawiałby sześć takich samych przedmiotów obróconych o tą samą wartość, lecz wyglądających nieco inaczej od pozostałych ze względu na kąt pod jakim znajdowałby się każdy ze wspomnianych przedmiotów względem naszego wzorku.

Wygląd naszego przykładowego układu elementów HTML może wydawać się nieciekawy, lecz możemy to zmienić, dzięki czemu możemy dostrzec zaletę tego, że wszystkie elementy dzieci elementu #rodzic znajdują się w zasięgu jednej i tej samej perspektywy.

#dziecko1 {
  top:30px;
  left:30px;
  transform:rotateY(30deg);
}

#dziecko2 {
  top:150px;
  left:30px;
  transform:rotateY(30deg);
}

#dziecko3 {
  bottom:30px;
  left:30px;
  transform:rotateY(30deg);
}

#dziecko4 {
  top:30px;
  right:30px;
  transform:rotateY(-30deg);
}

#dziecko5 {
  top:150px;
  right:30px;
  transform:rotateY(-30deg);
}

#dziecko6 {
  bottom:30px;
  right:30px;
  transform:rotateY(-30deg);
}

Rezultat:

1
2
3
4
5
6

Dzięki temu że do czwartego, piątego oraz szóstego dziecka elementu #rodzic została dodana funkcja rotateY() wraz z przeciwną wartością do wartości 30deg, czyli wartością -30deg, czwarty, piąty oraz szósty element dziecko elementu #rodzic został obrócony w przeciwną stronę niż pierwszy, drugi oraz trzeci element dziecko elementu #rodzic, dzięki czemu cały układ naszych elementów HTML prezentuje coś co może nas nieco bardziej zaciekawić.

Oczywiście jeżeli chcielibyśmy, aby każdy element dziecko elementu #rodzic w naszym przykładowym układzie elementów HTML wyglądał tak samo po przekształceniu za pomocą funkcji rotateY() oraz wartości 30deg musielibyśmy zrezygnować z pomysłu tworzenia takiego przekształcenia względem jednej i tej samej perspektywy na rzecz dodania do każdego elementu dziecka elementu #rodzic swojej własnej perspektywy, którą tworzyłaby, np. właściwość transform wraz z funkcją perspective() (wtedy należy usunąć właściwość perspective z elementu #rodzic).

#rodzic {
  position:relative;
  height:400px;
  background-color:black;
}

#rodzic > div {
  position:absolute;
  width:150px;
  height:100px;
  line-height:100px;
  font-size:26px;
  text-align:center;
  color:white;
  background-color:red;
  transform:perspective(300px) rotateY(30deg);
}

Rezultat:

1
2
3
4
5
6

W następnej części kursu CSS dowiemy się jak przeglądarka internetowa korzysta z pojęcia wektorów podczas przekształcenia elementu HTML w przestrzeni.