CSS3 - Manipulacja punktem środka perspektywy

W kilku poprzednich częściach tego działu kursu CSS dowiedzieliśmy się w jaki sposób utworzyć perspektywę dla danego elementu HTML. Wiemy, że perspektywa musi istnieć dla danego elementu HTML, jeżeli chcemy, aby przeglądarką internetowa prawidłowo odwzorowała wygląd danego elementu HTML w przestrzeni 3D, gdy skorzystamy z właściwości transform oraz funkcji 3D.

Tworząc perspektywę dla danego elementu HTML tak naprawdę odsuwamy umowny punkt środka perspektywy od jego domyślnej pozycji początkowej o podaną wartość wzdłuż osi Z, dzięki czemu przeglądarka internetowa może względem wspomnianego punktu środka perspektywy utworzyć ostateczny wygląd elementu HTML, gdy chcemy przekształcić dany element HTML w przestrzeni 3D.

Domyślnie pozycja początkowa punktu środka perspektywy znajduje się na środku elementu HTML, czyli w miejscu przecięcie się poziomej osi X, pionowej osi Y oraz prostopadłej osi Z.

Spójrzmy jak będzie wyglądał przykładowy element HTML, gdy obrócimy go względem poziomu o 45 stopni za pomocą funkcji rotateX(45deg) właściwości transform przy wartości perspektywy równej 300px, która została utworzona na podstawie domyślnej pozycji początkowej punktu środka perspektywy.

div {
  width:200px;
  height:200px;
  margin:0 auto;
  border:3px solid #000;
  text-align:center;
  line-height:100px;
  font-size:30px;
  transform:perspective(300px) rotateX(45deg);
}

Pozycja początkowa punktu środka perspektywy w naszym przykładzie została zaznaczona czarną kropką.

Rezultat:

DIV

Tak jakbyśmy mogli się tego spodziewać nasz przykładowy element div został obrócony o 45 stopni względem swojego poziomu przy wartości perspektywy równej 300px.

Perspektywa dla naszego przykładowego elementu HTML została utworzona na podstawie domyślnej pozycji początkowej punktu środka perspektywy, czyli została oddalona o 300px, dzięki funkcji perspective(300px) oraz właściwości transform od wspomnianej pozycji początkowej punktu środka perspektywy, która domyślnie znajduje się na środku elementu HTML.

To tak jakbyśmy wykorzystali nasz wzrok w celu spojrzenia na jakiś przykładowy przedmiot w taki sposób, aby dany przedmiot znalazł się na wprost nas, a nasz wzrok skupiałby się na środkowej części wspomnianego przedmiotu. Po obróceniu danego przedmiotu względem jego pionu otrzymalibyśmy nowy wygląd danego przedmiotu.

Pozycją początkową punktu środka perspektywy możemy manipulować, dzięki czemu perspektywa dla interesującego nas elementu HTML może zostać utworzona na podstawie nowego położenia początkowej pozycji punktu środka perspektywy co wpłynie na ostateczny wygląd przekształcanego elementu HTML przez przeglądarkę internetową.

Spójrzmy co się stanie z wyglądem naszego przykładowego elementu HTML, gdy zmienimy pozycję początkową punktu środka perspektywy, na podstawie którego jest tworzona perspektywa dla naszego przykładowego elementu HTML.

DIV

To tak jakbyśmy spojrzeli na przykładowy przedmiot z nieco innej perspektywy, np. umieszczając nasz wzrok nieco wyżej nad danym przedmiotem, bardziej spoglądając względem jego lewej górnej strony, dzięki czemu wygląd danego przedmiotu mógłby się zmienić.

To w jaki sposób manipulować pozycją początkową punktu środka perspektywy dowiemy się za chwilę, natomiast pierw spójrzmy na animację, która przedstawia jak zmienia się wygląd obróconego o 45 stopni względem poziomu elementu HTML, gdy zaczniemy manipulować pozycją początkową punktu środka perspektywy, na podstawie którego została utworzona perspektywa o wartości 300px dla naszego przykładowego elementu div.

DIV

To tak jakbyśmy obrócili jakiś przedmiot, oddalili od niego swój wzrok o stałą wartość, a następnie na dany przedmiot spoglądalibyśmy z różnych miejsc, np. z lewej, prawej, czy też górnej lub dolnej strony, dzięki czemu wygląd danego przedmiotu zmieniałby się.

Jak wiemy, aby sprawić żeby element HTML znalazł się w zasięgu jakiejkolwiek perspektywy, możemy wykonać tą czynność na trzy sposoby. W zależności który wariant wybierzemy do dyspozycji mamy określony sposób, aby manipulować domyślną pozycją początkową punktu środka perspektywy.

Jak wiemy, aby utworzyć perspektywę dla elementów dzieci danego elementu HTML możemy skorzystać z właściwości perspective. W takim wypadku manipulowanie pozycją początkową punktu środka perspektywy jest możliwe za pomocą właściwości perspective-origin. Pierwsza wartość właściwości perspective-origin odsuwa punkt środka perspektywy o podaną przez nas wartość od lewej krawędzi danego elementu HTML, do którego została dodana właściwość perspective. Druga wartość właściwości perspective działa w ten sam sposób jak pierwsza wartość, lecz odsuwa wspomniany punkt środka perspektywy od górnej krawędzi elementu HTML, do którego została dodana właściwość perspective.

Kolejnym sposobem na to, aby element HTML znalazł się w zasięgu perspektywy jest skorzystanie z właściwości transform oraz funkcji perspective(). W takim wypadku manipulowanie pozycją początkową punktu środka perspektywy jest możliwe za pomocą właściwości transform-origin. Pierwsza wartość właściwości transform-origin odsuwa o podaną wartość pionową oś Y od lewej krawędzi elementu HTML, do którego została dodana właściwość transform wraz z funkcją perspective(). Druga wartość właściwości transform-origin odsuwa o podaną wartość poziomą oś X od górnej krawędzi elementu HTML, do którego została dodana właściwość transform wraz z funkcją perspective(). W ten sposób nowo powstałe miejsce przecięcia się poziomej osi X oraz pionowej osi Y tworzy nową pozycję dla punktu środka perspektywy.

Innym sposobem na to, aby element HTML znalazł się w zasięgu perspektywy jest wymuszenie, aby dany element HTML znalazł się w zasięgu tej samej perspektywy, w jakiej znalazł się element rodzic interesującego nas elementu HTML. Jak wiemy efekt ten możemy uzyskać dodając właściwość transforn-style wraz z wartością preserve-3d do elementu rodzica interesującego nas elementu HTML, dla którego to elementu rodzica została utworzona perspektywa lub dla którego to elementu rodzica sprawiliśmy, aby wspomniany element rodzic znalazł się w zasięgu jakiejkolwiek perspektywy. W takim wypadku manipulowanie pozycją początkową punktu środka perspektywy jest możliwe za pomocą właściwości perspectieve-origin lub właściwości transform-origin w zależności jaki układ elementów HTML utworzyliśmy (właściwość perspective-origin służy do kontrolowania pozycji punktu środka perspektywy elementu HTML, do którego została dodana właściwość perspective, natomiast właściwość transform-origin jest przeznaczona między innymi do kontrolowania pozycji punktu środka perspektywy elementu HTML, do którego została dodana właściwość transform wraz z funkcją perspective()).

Dla naszego przykładowego elementu div utworzyliśmy perspektywę za pomocą właściwości transform oraz funkcji perspective(300px), dzięki czemu przeglądarka internetowa mogła obrócić względem poziomu nasz przykładowy element HTML za pomocą funkcji rotateX(45deg) oraz właściwości transform.

div {
  width:200px;
  height:200px;
  margin:0 auto;
  border:3px solid #000;
  text-align:center;
  line-height:100px;
  font-size:30px;
  transform:perspective(300px) rotateX(45deg);
}

Rezultat:

DIV

W takiej sytuacji manipulowanie domyślną pozycją początkową punktu środka perspektywy jest możliwe za pomocą właściwości transform-origin.

div {
  width:200px;
  height:200px;
  margin:0 auto;
  border:3px solid #000;
  text-align:center;
  line-height:100px;
  font-size:30px;
  transform:perspective(300px) rotateX(45deg);
  transform-origin:90% 10%;
}

Rezultat:

DIV

Zmiana domyślnej pozycji punktu środka perspektywy jest jednym z czynników, które wpływają na ostateczny wygląd przekształconego elementu HTML w przestrzeni 3D. Pozostałe czynniki będziemy stopniowo poznawać w kolejnych częściach tego działu kursu CSS.