CSS3 - Wektory w przekształceniach w przestrzeni
- Data publikacji
- Ostatnio edytowano
W tej części kursu CSS przyjrzymy się bliżej w jaki sposób przeglądarka internetowa korzysta z pojęcia wektorów w kontekście przekształceń elementu HTML w przestrzeni za pomocą niektórych funkcji właściwości transform.
Na początek utwórzmy przykładowy element HTML.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
div {
width:150px;
height:150px;
line-height:75px;
color:white;
text-align:center;
font-size:26px;
background-color:black;
}
</style>
</head>
<body>
<div>DIV</div>
</body>
</html>Rezultat:
Spróbujmy dodać do naszego elementu div przykładową animację.
div {
width:150px;
height:150px;
line-height:75px;
color:white;
text-align:center;
font-size:26px;
background-color:black;
animation:przesuniecieXY 4s linear infinite;
}
@keyframes przesuniecieXY
{
0% { transform:translateX(0) translateY(0); }
100% { transform:translateX(300px) translateY(100px); }
}Rezultat:
Do naszego przykładowego elementu div została dodana animacja o nazwie przesuniecieXY. Wspomniana animacja przesuniecieXY przesuwa dany element HTML o 300px w prawą stronę oraz o 100px w dół ekranu. Cała animacja wygląda tak jakby nasz przykładowy element HTML poruszał się po ukosie względem swojego górnego lewego rogu.
Jednak dlaczego przeglądarka internetowa widząc, że chcemy przekształcić dany element HTML za pomocą animacji utworzonej na podstawie funkcji translateX() oraz funkcji translateY() nie przesuwa interesującego nas elementu HTML pierw w prawą stronę o 300px, a następnie w dół o 100px?
Ponieważ przeglądarka internetowa rozwiązuje wspomniany problem korzystając z pojęcia wektorów w przestrzeni 2D, widząc iż równocześnie w tym samym momencie w naszej animacji chcemy przekształcić dany element HTML zarówno za pomocą funkcji translateX() jak i funkcji translateY().
Wektory są wykorzystywane, na przykład do przesunięcia punktu w przestrzeni 2D na podstawie poziomej osi X oraz pionowej osi Y.
Przykładowo załóżmy, że chcemy przesunąć jakiś punkt z miejsca 0, czyli z miejsca przecięcia się poziomej osi X oraz pionowej osi Y o wartość 300px w prawo, czyli wzdłuż poziomu oraz o wartość 100px w dół, czyli wzdłuż pionu. Spróbujmy rozwiązać nasz problem bez wykorzystania pojęcia wektorów.
Jak widzimy na zaprezentowanym schemacie punkt znajdujący się w miejscu przecięcia się poziomej osi X oraz pionowej osi Y został przesunięty w prawo o 300px od swojej pozycji początkowej oraz został przesunięty w dół o 100px od swojej pozycji początkowej, dzięki czemu wspomniany punkt znajduje się w nowym miejscu.
Cały proces przesunięcia naszego przykładowego punktu z jego miejsca pozycji początkowej do nowego miejsca możemy opisać za pomocą wektorów.
Tym razem na naszym schemacie znalazły się wektory. Za pomocą wektorów zostało przedstawione przesunięcie przykładowego punktu w przestrzeni 2D, ponieważ za pomocą wspomnianych wektorów możemy w dość łatwy sposób opisać to co się dzieje z naszym przykładowym punktem, który chcemy przesunąć o przykładowe wartości w przestrzeni 2D.
Nasz przykładowy punkt miał zostać przesunięty o 300px w prawo oraz o 100px w dół. Za pomocą poziomej osi X oraz pionowej osi Y określiliśmy pozycję początkową naszego przykładowego punktu, który znalazł się w miejscu przecięcia się wspomnianych osi. Wartości o jakie miał zostać przesunięty nasz przykładowy punkt są reprezentowane przez wektor a oraz wektor b oznacza to, że wektory pełnią rolę tylko informacyjną (same w sobie nie posiadają długości 300px, czy 100px, lecz łatwiej jest nam zrozumieć korzystanie z wektorów, gdy narysujemy je uwzględniając ich długość na podstawie wspomnianych wartości).
Wektor a reprezentuje wartość 300px oraz jest skierowany w prawą stronę wzdłuż poziomej osi X od pozycji początkowej punktu, który ma zmienić swoje położenie. Wektor b reprezentuje wartość 100px oraz jest skierowany w dół wzdłuż pionowej osi Y od pozycji początkowej punktu, który ma zmienić swoje położenie. Wynikiem istnienia wspomnianych wektorów a oraz b jest nowy wektor dwuwymiarowy, który został przeze mnie przykładowo nazwany ab, oraz który swój początek ma w miejscu pozycji początkowej punktu, który ma zmienić swoje położenie. Koniec wspomnianego wektora ab ma miejsce w punkcie, do którego ma zostać przesunięty nasz przykładowy punkt, czyli w punkcie oddalonym o 300px w poziomie oraz o 100px w pionie od pozycji początkowej punktu, który ma zmienić swoje położenie.
Jak wiemy gdy chcemy skorzystać z funkcji translateX() lub funkcji translateY(), aby przekształcić interesujący nas element HTML, przeglądarka internetowa dokonuje przesunięcia względem jednego punktu, który należał do pozycji początkowej interesującego nas elementu HTML. Przykładowo możemy powiedzieć, że całe przesunięcie interesującego nas elementu HTML odbywa się na podstawie lewego górnego rogu elementu HTML.
Jak widzimy w przykładzie, który został zaprezentowany powyżej, przeglądarka internetowa widząc, iż chcemy aby element HTML stał się animowanym elementem HTML, który ma być przekształcany jednocześnie za pomocą funkcji translateX() właściwości transform oraz funkcji translateY() właściwości transform, przeglądarka internetowa korzysta między innymi z pojęcia wektorów, świadomie bądź też nie. Ponadto w naszym przykładzie możemy dostrzec, że wektor ab wyznacza drogę jaką ma przebyć nasz przykładowy element HTML w animacji podczas zmiany swojego położenia względem lewego górnego rogu pozycji początkowej wspomnianego elementu HTML.
Ponadto warto zauważyć, że wartości jakie są reprezentowane przez wektor a oraz wektor b (a raczej stosunek tych wartości do siebie, czyli w tym wypadku wartości 300px do wartości 100px) wpływają na kąt pod jakim nasz animowany element HTML przebędzie drogę z miejsca pozycji początkowej do miejsca oddalonego o 300px w poziomie oraz o 100px w pionie od wspomnianego miejsca pozycji początkowej. Oznacza to, że wspomniany kąt nie zmieni się, gdy inne wartości będą miały taki sam stosunek wartości jak nasze przykładowe wartości 300px oraz 100px. Przykładowo stosunek wartości 300px do wartości 100px wynosi 3 do 1, ponieważ 300 / 100 = 3 / 1, czyli 3 do 1. Stosunek wartości 150px do wartości 50px wynosi również 3 do 1, ponieważ 150 / 50 = 3 / 1, czyli 3 do 1, co oznacza, że jeżeli w naszym przykładzie wektor a będzie reprezentował wartość 150px, a wektor b będzie reprezentował wartość 50px to kąt pod jakim nasz przykładowy animowany element HTML przebędzie drogę nie zmieni się, lecz zmieni się tylko długość tej drogi (będzie ona krótsza). Spróbujmy zobaczyć to na animacji.
div {
width:150px;
height:150px;
line-height:75px;
color:white;
text-align:center;
font-size:26px;
background-color:black;
animation:przesuniecieXY 4s linear infinite;
}
@keyframes przesuniecieXY
{
0% { transform:translateX(0) translateY(0); }
100% { transform:translateX(150px) translateY(75px); }
}Rezultat:
Oczywiście jeżeli chcielibyśmy, aby nasz przykładowy element HTML przebył dłuższy odcinek drogi pod tym samym kątem, który był wyznaczony przez stosunek wartości 300px do wartości 100px wystarczy dobrać wartości większe (na przykład wartość 600px oraz wartość 200px), których stosunek będzie taki sam jak wartości 300px do wartości 100px.
Ponadto warto zauważyć, iż jeżeli wartość reprezentowana przez wektor a (którą podajemy jako wartość funkcji translateX() w naszej przykładowej animacji) będzie mniejsza od wartości reprezentowanej przez wektor b (którą podajemy jako wartość funkcji translateY() w naszej przykładowej animacji) to interesujący nas element HTML przesunie się bardziej do dołu ekranu niż w prawą stronę. Natomiast gdy wspomniane wartości będą równe, nasz przykładowy element HTML przesunie się równomiernie względem poziomu oraz pionu.
translateX(300px) translateY(150px)
translateX(150px) translateY(300px)
translateX(300px) translateY(300px)
Wiedza o stosunku wartości wektorów przyda się nam w następnej części kursu CSS, w której postaramy się zrozumieć ideę działania funkcji rotate3d().