CSS3 - Idea działania funkcji rotate3d()

Uwaga Niektóre przeglądarki internetowe mogą mieć wciąż problem z interpretowaniem informacji, które zostały zaprezentowane w tej części kursu CSS (Internet Explorer).

W tej części kursu CSS postaramy się zrozumieć ideę działania funkcji rotate3d(), którą możemy podać jako wartość właściwości transform oraz która służy do przekształcenia wyglądu elementu w przestrzeni 3D.

Gdy poznawaliśmy różne funkcje, jakie możemy podać wraz z właściwością transform mogliśmy zauważyć, że gdy chcemy przekształcić interesujący nas element HTML za pomocą funkcji translateX(), funkcji translateY() oraz funkcji translateZ() jednocześnie, to możemy skorzystać z jednej funkcji translate3d(), aby otrzymać ten sam efekt. Podobna sytuacja tyczy się funkcji scaleX(), funkcji scaleY() oraz funkcji scaleZ(), które możemy zapisać za pomocą jednej funkcji scale3d(). Idąc tym tropem, gdy widzimy, że element HTML może również być przekształcony za pomocą funkcji rotateX(), funkcji rotateY() oraz funkcji rotateZ(), możemy pomyśleć sobie, że idea działania funkcji rotate3d() jest podobna do wcześniej wymienionych funkcji translate3d() oraz scale3d(), jednak wcale tak nie jest.

Funkcja rotate3d() przekształca element HTML w dość oryginalny sposób, co prawda możemy dobrać wartości dla funkcji rotate3d() tak, aby ostateczny wygląd elementu HTML był taki sam, jakbyśmy przekształcili go za pomocą funkcji rotateX(), funkcji rotateY() oraz funkcji rotateZ(), jednak funkcja rotate3d() nie została po to stworzona.

Funkcja rotate3d() obraca interesujący nas element HTML w przestrzeni 3D. Funkcja rotate3d() oczekuje od nas abyśmy podali cztery parametry, jednak zanim dowiemy się co tak naprawdę poszczególne parametry funkcji rotate3d() oznaczają, spróbujemy wyjaśnić sobie na czym polega obrót, jaki wykonuje wspomniana funkcja rotate3d() na elemencie HTML.

div {
  width:150px;
  height:150px;
  line-height:150px;
  color:white;
  text-align:center;
  font-size:26px;
  background-color:red;
  animation:obrot3D 8s linear infinite;
}

@keyframes obrot3D
{
  0% { transform:perspective(500px) rotate3d(1,1,0,0); }
  100% { transform:perspective(500px) rotate3d(1,1,0,360deg); }
}

Rezultat:

DIV

Do przykładowego elementu div została dodana przykładowa animacja o nazwie obrot3D, która została utworzona za pomocą reguły @keyframes, w której to regule została między innymi wykorzystana funkcja rotate3d() wraz z przykładowymi czterema wartościami (1,1,0,360deg). Czwarta wartość, czyli w tym wypadku wartość 360deg oznacza wartość o jaką ma obrócić się dany element HTML wokół trójwymiarowego wektora, który jest wyznaczony przez stosunek wartości trzech pierwszych wartości funkcji rotate3d(), jakie podaliśmy, czyli w tym wypadku wartości 1,1,0. Pierwsza wartość oznacza wartość jaką ma reprezentować wektor, który znajdzie się na osi X. Druga wartość oznacza wartość jaką ma reprezentować wektor, który znajdzie się na osi Y. Trzecia wartość oznacza wartość jaką ma reprezentować wektor, który znajdzie się na osi Z. Wynikiem istnienia trzech wspomnianych wektorów jest jeden trójwymiarowy wektor, wokół którego jest obracany dany element HTML o podaną przez nas wartość.

wyznaczenie trójwymiarowego wektora

Schemat, który został zaprezentowany powyżej przedstawia sposób, który może zostać wykorzystany do wyznaczenia trójwymiarowego wektora, jaki jest tworzony na podstawie wektorów, które znajdują się na osi X, osi Y oraz osi Z oraz które reprezentują przykładowe wartości. Wspomniany trójwymiarowy wektor został oznaczony niebieskim kolorem. Wokół w ten sposób wyznaczonego wektora trójwymiarowego wykonuje się obrót elementu HTML, gdy korzystamy z funkcji rotate3d() oraz właściwości transform.

Wektor trójwymiarowy jest tworzony na podstawie stosunku trzech wartości, które są kolejno reprezentowane przez wektor znajdujący się na osi X, wektor znajdujący się na osi Y oraz wektor znajdujący się na osi Z, oznacza to, że dla wielu kombinacji wspomnianych wartości możemy uzyskać taki sam efekt. Na naszym przykładowym schemacie widzimy, iż wektor a reprezentuje wartość 2, wektor b reprezentuje wartość 2, wektor c reprezentuje wartość 1, oznacza to, że stosunek wspomnianych wartości wynosi 2 do 2 do 1. Przykładowo taki sam stosunek wartości posiadają liczby 14, 14, 7 lub 28, 28, 14 lub 8, 8, 4 lub wiele innych kombinacji liczb.

W przypadku gdy każdy z trzech wektorów, które wyznaczają jeden wektor trójwymiarowy, reprezentuje wartość różną od 0, wspomniany wektor trójwymiarowy reprezentuje przekątną prostopadłościanu wyznaczonego przez wartości, jakie reprezentują poszczególne wektory znajdujące się na osi X, osi Y oraz osi Z co zostało zaprezentowane na naszym poprzednim schemacie.

W naszej przykładowej animacji jako pierwsze trzy wartości funkcji rotate3d() podaliśmy wartości 1,1,0. W takim wypadku wartość 0 nie jest brana pod uwagę, co oznacza, że nasz trójwymiarowy wektor, wokół którego wykona się obrót elementu HTML o 360deg będzie wyznaczony wyłącznie za pomocą pierwszej oraz drugiej wartości funkcji rotate3d(), czyli wartości 1 oraz 1, czyli za pomocą wektora znajdującego się na osi X oraz osi Y, czyli w takim wypadku nasz wektor trójwymiarowy reprezentuje przekątną kwadratu znajdującego się na płaszczyźnie wyznaczonej przez oś X oraz oś Y.

wyznaczenie trójwymiarowego wektora na osi X oraz osi Y

Jak wiemy w naszym świecie wirtualnym domyślnie miejsce przecięcia się osi X, osi Y oraz osi Z znajduje się w centralnej części elementu HTML, natomiast wartości dodanie na osi Y znajdują się poniżej osi X, a nie powyżej, dlatego wyznaczanie trójwymiarowego wektora za pomocą wartości 1,1,0, wokół którego obraca się nasz przykładowy element HTML możemy przedstawić w następujący sposób.

wektor trójwymiarowy w elemencie HTML

A tak w naszej wirtualnej rzeczywistości wygląda obrót 360deg wokół wektora trójwymiarowego wyznaczonego za pomocą wartości 1,1,0.

DIV
wektor trójwymiarowy w animacji

To tak gdybyśmy mieli w swoich rękach jakiś kwadratowy przedmiot, a następnie wbili w niego długi gwóźdź pod odpowiedni kątem aż do centralnej części wewnętrznej wspomnianego przedmiotu, a następnie obracalibyśmy danym przedmiotem na wbitym gwoździu patrząc na cały obrót z jednego i tego samego punktu.

Z ostatniego przykładu należy zapamiętać, że jeżeli któraś z trzech pierwszych podanych przez nas wartości funkcji rotate3d() właściwości transform jest wartością 0 to pozostałe dwie niezerowe wartości określają osie, na których zostanie utworzona płaszczyzna, na której powstanie interesujący nas wektor trójwymiarowy, wokół którego będzie obracany dany element HTML.

Ponadto, jeżeli podamy dwie wartości, które będą równe 0 to trzecia z nich będzie oznaczała oś, na której powstanie interesujący nas wektor trójwymiarowy, wokół którego będzie obracany dany element HTML.

wektor trójwymiarowy w elemencie HTML na osi Y

Rezultat:

DIV
wektor trójwymiarowy w animacji na osi Y

Ponadto jeżeli wszystkie trzy pierwsze wartości, jakie podamy wraz z funkcją rotate3d() właściwości transform będą różne od wartości 0 to interesujący nas wektor trójwymiarowy, wokół którego zostanie obrócony dany element HTML, będzie reprezentowany przez przekątną prostopadłościanu o czym mogliśmy dowiedzieć się już wcześniej podczas tej części kursu CSS.

wektor trójwymiarowy w elemencie HTML na osi X Y Z

Rezultat:

DIV
wektor trójwymiarowy w animacji 3D

Tym razem nasz przykładowy element HTML obraca się o 360deg wokół trójwymiarowego wektora, który został utworzony na podstawie niezerowych wartości funkcji rotate3d(), czyli wartości 2,2,1, które są reprezentowane przez wektor znajdujący się na poziomej osi X, wektor znajdujący się na pionowej osi Y oraz wektor znajdujący się na prostopadłej osi Z.

div {
  width:150px;
  height:150px;
  line-height:150px;
  color:white;
  text-align:center;
  font-size:26px;
  background-color:black;
  animation:obrot3D 8s linear infinite;
}

@keyframes obrot3D
{
  0% { transform:perspective(500px) rotate3d(2,2,1,0); }
  100% { transform:perspective(500px) rotate3d(2,2,1,360deg); }
}

Ponadto należy pamiętać, że interesujący nas trójwymiarowy wektor jest wyznaczany przez stosunek trzech pierwszych wartości funkcji rotate3d(), a więc gdy podamy wartości 2,2,1 lub 20,20,10 lub 40,40,20 lub wiele innych kombinacji wartości, których stosunek będzie wynosił 2 do 2 do 1, wygląd naszej przykładowej animacji nie zmieni się.

Kolejną rzeczą, którą należy sobie uświadomić jest fakt, że w tej części kursu CSS został zaprezentowany domyślny wygląd animacji utworzonej za pomocą funkcji rotate3d() właściwości transform, co oznacza, że wygląd wspomnianej animacji może ulec zmianie, gdy zaczniemy manipulować punktem zero, punktem środka perspektywy lub też, gdy do właściwości transform zaczniemy dodawać w różnej kolejności kolejne funkcje służące do przekształcenia interesującego nas elementu HTML w przestrzeni.