CSS3 - Tworzenie sfery w przestrzeni 3D
Uwaga Niektóre przeglądarki internetowe mogą mieć wciąż problem z interpretowaniem informacji, które zostały zaprezentowane w tej części kursu CSS (Opera, Safari).
W poprzedniej części kursu CSS dowiedzieliśmy w jaki sposób możemy sprawić, aby element HTML stał się animowanym elementem HTML w przestrzeni 3D, natomiast w tej części kursu CSS poszerzymy swoją wiedzę na temat animacji w przestrzeni 3D zapoznając się z zagadnieniem sfery.
Naszym celem podczas tej części kursu CSS będzie utworzenie animacji, która została zaprezentowana poniżej.
Co ciekawe efekt, który został zaprezentowany powyżej możemy osiągnąć wykorzystując do tego celu tylko jedną funkcję właściwości transform, czyli funkcję rotateY() (oraz oczywiście funkcję perspective()). Jak wiemy funkcja rotateY() obraca element HTML wokół jego pionu, czyli wokół pionowej osi Y. Domyślnie wygląd takiej animacji prezentuje się następująco:
rotateY(360deg)
Nasz przykładowy element HTML obraca się o 360 stopni względem swojego pionu, czyli względem pionowej osi Y. Jak wiemy kontrolowanie pozycji pionowej osi Y jest możliwe za pomocą pierwszej wartości właściwości transform-origin. Zobaczmy jak zmieni się nasza przykładowa animacja wykorzystująca funkcję rotateY(), gdy zaczniemy manipulować miejscem położenie pionowej osi Y od lewej krawędzi pozycji początkowej danego elementu HTML wykorzystując do tego celu właściwość transform-origin.
transform-origin:25% 50%;
transform-origin:0 50%;
transform-origin:100% 50%;
Co prawda dzięki pierwszej wartości właściwości transform-origin nasza przykładowa animacja wykorzystująca funkcję rotateY() zmieniła nieco swój wygląd, lecz odbiega ona nieco swoim wyglądem od animacji, która została zaprezentowana na początku tej części kursu CSS.
Przyjrzyjmy się jeszcze raz animacji, którą chcemy uzyskać.
Spoglądając na nasz przykładowy animowany element div możemy dojść do wniosku, że wspomniany element HTML wygląda tak jakby obracał się wokół czegoś co wydawać by się mogło jakimś okręgiem lub jakąś dodatkową przestrzenią. Przestrzeń tą możemy porównać do sfery, czyli do zbioru punktów w przestrzeni, które w całości tworzą kształt, który możemy porównać do kuli.
sfera
Naszą teoretyczną sferę możemy w dość łatwy sposób uzyskać, a mianowicie wystarczy podać jedną wartość, która będzie określała zarówno wysokość jak i szerokość wspomnianej sfery. Wartość ta zostanie utworzona po każdej stronie osi X, osi Y oraz osi Z licząc od miejsca przecięcia się wspomnianych osi, dzięki czemu gdy wykonamy obrót względem pionu lub poziomu (za pomocą funkcji rotateY() lub funkcji rotateX()) dany element HTML będzie obracał się wokół powstałej niewidzialnej sfery. Wspomnianą wartość należy podać jako trzecią wartość właściwości transform-origin, natomiast pierwsze dwie wartości wspomnianej właściwości transform-origin możemy pozostawić bez zmian, jeżeli nie chcemy w dodatkowy sposób zmieniać wyglądu naszej animacji (domyślna wartość to 50%).
transform-origin:50% 50% 200px;
Jak widzimy na naszym przykładzie, dzięki trzeciej wartości właściwości transform-origin na osi X (również na osi Y oraz osi Z, co jednak nie zostało przeze mnie zaznaczone w tym przykładzie) powstała dodatkowa długość, względem której może obracać się nasz przykładowy element HTML. Wspomniana długość na osi X w sumie wynosi 400px, ponieważ jako trzecią wartość właściwości transform-origin podaliśmy wartość 200px co oznacza, że 200 pikseli długości zostanie utworzone zarówno po stronie wartości dodatnich, jak i po stronie wartości ujemnych licząc od miejsca zerowego, przez które przechodzi interesująca nas oś X.
Cały kod ostatniego przykładu znajduje się poniżej.
div {
width:150px;
height:150px;
margin:0 auto;
background-color:#000;
color:#FFF;
text-align:center;
line-height:50px;
font-size:26px;
animation:naszaAnimacja 4s linear infinite;
transform-origin:50% 50% 200px;
}
@keyframes naszaAnimacja
{
0% { transform:perspective(900px) rotateY(0); }
100% { transform:perspective(900px) rotateY(360deg); }
}
Podobny rezultat uzyskamy, gdy zamiast funkcji rotateY() wykorzystamy funkcję rotateX() w naszym zapisie, dzięki czemu nasz przykładowy element HTML będzie obracał się względem poziomu, a nie pionu, czyli względem poziomej osi X, a nie pionowej osi Y, czyli względem szerokości sfery, a nie wysokości sfery.
transform-origin:50% 50% 200px;
A co w sytuacji gdy zechcemy, aby nasz przykładowy element HTML krążył po ukosie względem danej sfery?
W takim wypadku należy umieścić w naszym zapisie funkcję rotate() wraz ze stałą wartością 45deg podczas wykonywania się całej animacji. Funkcję rotate() należy umieścić przed funkcją rotateX() lub funkcją rotateY(), dzięki czemu funkcja rotate() będzie pełniła rolę wyznaczającą kierunek obrotu, w którym to kierunku będzie krążył dany element HTML wokół istniejącej sfery wyznaczonej przez trzecią wartość właściwości transform-origin.
div {
width:150px;
height:150px;
margin:0 auto;
background-color:#000;
color:#FFF;
text-align:center;
line-height:50px;
font-size:26px;
animation:naszaAnimacja 4s linear infinite;
transform-origin:50% 50% 200px;
}
@keyframes naszaAnimacja
{
0% { transform:perspective(900px) rotate(45deg) rotateY(0); }
100% { transform:perspective(900px) rotate(45deg) rotateY(360deg); }
}Rezultat:
transform-origin:50% 50% 200px;
Jak pamiętamy, gdy poznawaliśmy ideę przekształcenia elementu HTML w przestrzeni 3D powiedzieliśmy sobie, iż trzecia wartość właściwości transform-origin jest odpowiedzialna za utworzenie dodatkowej długości na osi Z, która to długość z kolei jest potrzebna przeglądarce internetowej w momencie gdy chcemy przekształcić element HTML za pomocą funkcji scaleZ() właściwości transform. Dzięki tej części kursu CSS o wspomnianej dodatkowej długości na osi Z tworzonej przez trzecią wartość właściwości transform-origin możemy powiedzieć, że jest to wartość promienia sfery, która może zmienić wygląd naszych animowanych elementów HTML w przestrzeni. Promień sfery to długość od środka danej sfery, a raczej od centralnego punktu w danej sferze do jej granicy.
promień sfery
W następnej części kursu CSS poznamy sytuację, w której manipulacja punktem zero oraz punktem środka perspektywy może stwarzać pewien problem.