CSS3 - Idea przekształcenia elementu HTML w przestrzeni 3D

W poprzedniej części kursu CSS poznaliśmy funkcje właściwości transform, które służą do przekształcenia wyglądu elementu HTML w przestrzeni 3D, jednak aby móc przekształcić wygląd elementu HTML w przestrzeni 3D dany element HTML musi znaleźć się w perspektywie swojej lub w perspektywie swojego elementu rodzica. W jaki sposób sprawić, aby dany element HTML znalazł się w perspektywie swojej lub perspektywie swojego elementu rodzica, tym zagadnieniem zajmiemy się bardziej szczegółowo w następnej części kursu CSS, ponieważ pierw musimy zrozumieć ideę, na podstawie której przeglądarka internetowa stara się tworzyć wygląd elementu HTML, który przypomina wygląd elementu HTML w przestrzeni 3D.

Na początek musimy wyobrazić sobie, że istnieje niewidzialny dla nas punkt, względem którego jest tworzony obraz danego elementu HTML na ekranie naszego monitora. Punktowi temu nadamy nazwę punkt środka perspektywy. Wspomniany punkt środka perspektywy domyślnie znajduje się na środku elementu HTML i jest od niego oddalony w przestrzeni 3D o 0, czyli możemy powiedzieć, że znajduje się on w miejscu przecięcia się osi X, osi Y oraz osi Z, które już zdążyliśmy poznać.

punkt środka perspektywy

Nasz punkt środka perspektywy jest wykorzystywany przez przeglądarkę internetową jako punkt odniesienia, względem którego zostanie utworzony obraz, czy też wygląd danego elementu HTML na ekranie naszego monitora. Oczywiście mowa tu o wyglądzie elementu HTML po przekształceniu go, za pomocą którejś z funkcji służącej do przekształcenia elementu HTML w przestrzeni 3D.

Domyślnie punkt środka perspektywy znajduje się na środku elementu HTML, w miejscu przecięcia się osi X, osi Y oraz osi Z, dlatego gdy w takiej sytuacji chcemy przekształcić dany element HTML, za pomocą którejś z funkcji służącej do przekształcenia elementu HTML w przestrzeni 3D, możemy nie uzyskać pożądanego efektu, ponieważ przeglądarka internetowa nie ma jak zmienić wyglądu danego elementu HTML względem punktu środka perspektywy, dlatego w takiej sytuacji musimy utworzyć perspektywę dla danego elementu HTML, czyli inaczej mówiąc musimy odsunąć punkt środka perspektywy względem osi Z od danego elementu HTML. Jednym ze sposobów na utworzenie wspomnianej perspektywy jest skorzystanie z funkcji perspective() właściwości transform, którą należy podać jako pierwszą funkcję wspomnianej właściwości transform.

perspective(200px)

transform CSS3 - perspective(200px)

Korzystając z funkcji perspective(200px) oraz właściwości transform do przykładowego elementu HTML została dodana perspektywa o wartości 200px, inaczej mówiąc punkt środka perspektywy został przesunięty wzdłuż osi Z o 200px od miejsca przecięcia się osi X, osi Y oraz osi Z danego elementu HTML, do którego została dodana perspektywa o wartości 200px. Względem wspomnianego punktu środka perspektywy przeglądarka internetowa utworzyła wygląd naszego przykładowego elementu div (sam wygląd danego elementu HTML nie zmienił się, ponieważ nie dodaliśmy do niego żadnej funkcji przekształcającej w przestrzeni 3D).

Spójrzmy jak zmieni się wygląd elementu HTML, gdy w tym momencie spróbujemy obrócić go względem pionu o 15 stopni, czyli gdy skorzystamy z funkcji rotateY(15deg).

perspective(200px) rotateY(15deg)

transform CSS3 - perspective(200px) rotateY(15deg)

A teraz w rzeczywistości zobaczmy jak zmieni się wygląd przykładowego elementu div, do którego zostanie dodana właściwość transform wraz z następującymi funkcjami: perspective(200px) rotateY(15deg).

div {
  margin:0 auto;
  width:150px;
  height:150px;
  background-color:gold;
  transform:perspective(200px) rotateY(15deg);
}

Rezultat:

DIV

Naszym oczom ukazał się obraz elementu HTML, który wyglądem przypomina kwadratowy element, który jest lekko obrócony w pionie do środka.

Aby zrozumieć w jaki sposób wartość, jaką podamy wraz z funkcją perspective() wpływa na wygląd danego elementu HTML po przekształceniu go za pomocą funkcji 3D właściwości transform należy zapamiętać fakt, że przeglądarka internetowa (w kontekście przekształceń elementu HTML w przestrzeni 3D) tworzy wygląd danego elementu HTML względem odległości punktu środka perspektywy od danego elementu HTML, a więc gdy podamy nieco mniejszą lub większą wartość niż nasza przykładowa wartość 200px, wygląd naszego przykładowego elementu div przekształconego za pomocą funkcji rotateY(15deg) ulegnie zmianie.

perspective(50px) rotateY(15deg)

DIV

perspective(100px) rotateY(15deg)

DIV

perspective(200px) rotateY(15deg)

DIV

perspective(300px) rotateY(15deg)

DIV

To tak jakbyśmy wzięli jakiś przedmiot o kwadratowym kształcie, obrócili go w jedną ze stron, umieścilibyśmy go dokładnie na wprost naszego wzroku względem środka danego przedmiotu, a następnie zaczęlibyśmy odsuwać się od danego przedmiotu lub przybliżać się do niego, co w efekcie skutkowałoby zmianą wyglądu danego przedmiotu widzianego przez nasze oczy, ponieważ odległość naszych oczów od danego przedmiotu ulegałaby zmianie.

W tym momencie należy również zapamiętać, że technika wykorzystująca perspektywę daje nam przybliżony, lecz nie dokładny obraz danego elementu HTML, który byłby tworzony przez ludzkie oko w rzeczywistej przestrzeni trzech wymiarów, czyli przestrzeni 3D.

W jednej z poprzednich części kursu CSS poznaliśmy właściwość transform-origin. Wiemy, że właściwość transform-origin możemy wykorzystać do zmiany domyślnego położenia osi X oraz osi Y, a co za tym idzie możemy zmienić domyślne miejsce przecięcia się wszystkich trzech osi, czyli osi X, osi Y oraz osi Z.

Z tej części kursu CSS wiemy, że gdy tworzymy perspektywę dla danego elementu HTML to tak naprawdę odsuwamy teoretyczny punkt środka perspektywy o podaną wartość od miejsca przecięcia się osi X, osi Y oraz osi Z danego elementu HTML, dzięki czemu przeglądarka internetowa może przekształcić wygląd danego elementu HTML w przestrzeni 3D.

Łącząc te dwa ostatnie fakty w jeden, możemy wywnioskować, że miejsce przecięcia się osi X, osi Y oraz osi Z danego elementu HTML wpływa na miejsce punktu środka perspektywy (po jego odsunięciu, czyli dodaniu perspektywy do danego elementu HTML), a co za tym idzie ostateczny wygląd elementu HTML po przekształceniu go za pomocą funkcji 3D względem danej perspektywy może ulec zmianie.

transform CSS3 - perspective(200px) wraz z transform-origin:10% 10%;

Spójrzmy jak w rzeczywistości zmieni się wygląd elementu HTML, gdy dodamy do niego perspektywę o różnych przykładowych wartościach (za pomocą funkcji perspective()), obrócimy dany element HTML w pionie o 15 stopni (za pomocą funkcji rotateY(15deg)) oraz zmienimy miejsce przecięcia się osi X, osi Y oraz osi Z wspomnianego elementu HTML za pomocą właściwości transform-origin oraz wartości 10% 10%.

perspective(50px) rotateY(15deg)

DIV

perspective(100px) rotateY(15deg)

DIV

perspective(200px) rotateY(15deg)

DIV

perspective(300px) rotateY(15deg)

DIV

Żeby jeszcze bardziej skomplikować nam zrozumienie tego jak przeglądarka internetowa tworzy wygląd danego elementu HTML w przestrzeni 3D należy poznać kolejną rzecz, ponieważ wraz z właściwością transform-origin możemy podać nie dwie, a trzy wartości. Ta tajemnicza trzecia wartość właściwości transform-origin odpowiada za odległość miejsca przecięcia się osi X, osi Y oraz osi Z w przestrzeni 3D względem domyślnego miejsca przecięcia się wspomnianych osi, dzięki czemu odległością od ekranu do miejsca przecięcia się wspomnianych osi możemy manipulować, a co za tym idzie odległością danego elementu HTML od ekranu oraz od istniejącego przesuniętego punktu środka perspektywy również możemy manipulować.

transform-origin:50% 50% 25px;

transform CSS3 - perspective(200px) wraz z transform-origin:50% 50% 100px;

Na schemacie, który został zaprezentowany powyżej możemy dostrzec, iż trzecia wartość właściwości transform-origin (w tym wypadku dodatnia wartość 25px) wpływa na przesunięcie danego elementu HTML od naszego ekranu urządzenia w głąb (ujemna wartość przesunęłaby wspomniany element HTML w przeciwną stronę, czyli do naszego wzroku, czyli do punktu środka perspektywy, który został odsunięty od domyślnej pozycji początkowej danego elementu HTML o 200px).

To tak jakbyśmy wzięli jakiś przedmiot o kwadratowym kształcie, umieścilibyśmy go dokładnie na wprost naszego wzroku względem środka danego przedmiotu, a następnie zaczęlibyśmy odsuwać lub przybliżać wspomniany przedmiot do naszego wzroku, co w efekcie skutkowałoby zmianą wyglądu danego przedmiotu widzianego przez nasze oczy, ponieważ odległość wspomnianego przedmiotu od naszych oczów ulegałaby zmianie.

Spójrzmy jak w rzeczywistości zmieni się wygląd elementu HTML, gdy dodamy do niego perspektywę o wartości 200px (za pomocą funkcji perspective()), obrócimy dany element HTML w pionie o 15 stopni (za pomocą funkcji rotateY(15deg)), zmienimy miejsce przecięcia się osi X, osi Y oraz osi Z za pomocą pierwszych dwóch wartości właściwości transform-origin (na przykład za pomocą wartości 10% 10%) oraz odsuniemy nasz przykładowy element HTML w głąb ekranu względem osi Z o różne przykładowe wartości za pomocą trzeciej wartości właściwości transform-origin.

transform-origin:10% 10% 50px;

DIV

transform-origin:10% 10% 100px;

DIV

transform-origin:10% 10% 200px;

DIV

transform-origin:10% 10% 300px;

DIV

Ogólnie rzecz biorąc trzecia wartość właściwości transform-origin jest rzadko wykorzystywana (domyślna wartość tej wartości to wartość 0). Trzecia wartość właściwości transform-origin nie może wynosić 0, gdy oczekujemy iż funkcja scaleZ() (która również występuje jako trzecie wartość funkcji scale3d()) ma zmienić wygląd danego elementu HTML. Funkcja scaleZ() skaluje odległość danego elementu HTML względem osi Z w przestrzeni 3D, mowa tu o odległości wspomnianego elementu HTML od lub do ekranu naszego urządzenia (a raczej jego punktu zero, czyli miejsca, w którym przecinają się pozioma oś X, pionowa oś Y, a co za tym idzie również prostopadła do osi X oraz osi Y oś Z). Wymagane obliczenie wspomnianego skalowania jest wykonywane przez przeglądarkę internetową za pomocą wzoru: scaleZ × Z - Z, gdzie scaleZ to wartość funkcji scaleZ(), a Z to wartość przesunięcia punktu zero w przestrzeni 3D od jego pozycji początkowej, które możemy kontrolować za pomocą trzeciej wartości właściwości transform-origin o czym już wspomniałem. Skoro domyślnie wspomniana trzecia wartość właściwości transform-origin wynosi 0 to rezultatem równania scaleZ × 0 - 0 zawsze będzie wartość 0 przez co gdy chcemy skorzystać z funkcji scaleZ() może wydawać się nam, że wspomniana funkcja scaleZ() nie działa. Dlatego gdy chcemy, aby funkcja scaleZ() dała nam jakąkolwiek zmianę wyglądu danego elementu HTML, musi zmienić trzecią domyślną wartość właściwości transform-origin.

Jeżeli nie chcemy korzystać z funkcji scaleZ(), a chcemy uzyskać podobny efekt, jaki tworzy wspomniana funkcja scaleZ() (bez konieczności zmiany trzeciej wartości właściwości transform-origin), możemy skorzystać z funkcji translateZ().

W następnej części kursu CSS przyjrzymy się bliżej dostępnym sposobom tworzenia perspektywy dla elementu HTML oraz jego elementów dzieci.