Jest to możliwe! Co prawda mamy ograniczone możliwości tego, co możemy w ich ramach osiągnąć - nie ma mowy o stworzeniu gry z perspektywą w wydajny sposób, natomiast możemy stworzyć taką oto wydajną animację używając kilku właściwości CSS, w odpowiedniej kombinacji.
Wasze opinie liczą się najbardziej, materiały Tworzymy dla was!
Oto wybrane komentarze które zostawiliście pod tym wideo!
Mega, super wiedza, i powiem, że nigdzie takiej nie znalazłem, no dobra, dokumentacja, ale tu pokazuje się w praktyce :]
Mega, super wiedza, i powiem, że nigdzie takiej nie znalazłem, no dobra, dokumentacja, ale tu pokazuje się w praktyce :]
Cześć, witajcie na kodu.je!
W tym odcinku zrobimy trójwymiarową,
obracającą się kostkę w samym CSSie.
[ intro kodu.je ]
Jeśli nie znacie pojęcia perspektywy w CSSie
i nie animowaliście jeszcze trójwymiarowych obiektów,
koniecznie obejrzyjcie nasz materiał Flipcards.
Adnotacja powinna wam wyskoczyć w prawym, górnym rogu ekranu.
Tworzymy sobie nasz markup,
czyli diva o klasie "container",
który będzie przechowywał tę naszą kostkę o klasie "cube".
No i sam w sobie będzie miał 6 divów,
reprezentujących poszczególne strony naszej kostki
Więc nadamy sobie klasy "front", "back", "right", "left", "top" i "bottom".
Przejdźmy więc do naszego pliku "styles.css"
i zacznijmy od zdefiniowania reguł dla naszego containera.
No ustawimy mu szerokość na 200px, wysokość na 200px,
nadamy mu chwilowo jakiś background, powiedzmy czarny,
żeby było widać, gdzie tak naprawdę ten element znajduje się na stronie.
No i ustalmy, aby ta nasza kostka miała wymiary 100% szerokości rodzica
i wysokości oraz aby była wypozycjonowana absolutnie względem tego naszego kontenera.
Ustawimy kolor na czerwony,
jak widzimy ten cube znajduje się w naszym kontenerze,
możemy już tak naprawdę pozbyć się tych reguł,
no i zdefiniujmy style dla naszych ścian.
Pobieramy wszystkie divy,
które znajdują się bezpośrednio wewnątrz cube'a,
czyli te nasze ściany.
No i ustalamy, aby one miały tę szerokość 200px
i wysokość również 200px. Nadamy im border 20px,
powiedzmy na razie czarny, no i oczywiście użyjemy box-sizing ustawiony na border-box, aby to wszystko nam się tu ładnie ułożyło.
Jeżeli nie wiecie jak działa box-sizing,
możecie kliknąć w adnotację widoczną w prawym górnym rogu ekranu,
aby dowiedzieć się czym jest box model.
No i analogicznie do naszego cube'a,
nasze ściany również powinny być wypozycjonowane absolutnie względem swojego rodzica.
I jak widzicie, te wszystkie nasze ściany są już zawarte w tym naszym cube'ie. Żaden element nie wychodzi poza ten element cube.
Czyli każdą z naszych ścian chcielibyśmy odpowiednio obrócić,
tak aby reprezentowały one faktyczną kostkę trójwymiarową.
Więc tak naprawdę dla przedniej ściany,
moglibyśmy ustawić transforma takiego, że załóżmy w osi X,
chcielibyśmy go obrócić o 0 stopni.
Dlaczego o 0?
Ponieważ ta przednia nasza ściana,
już jest obrócona tak jakbyśmy tego chcieli.
No i ustawmy border-color na taki,
aby on nam się wyróżniał.
No oczywiście tutaj nam się te pozostałe ściany nachodzą,
więc tak naprawdę podejrzeć moglibyśmy to,
ustawiając z-index na jakąś wyższą wartość.
Może na ten moment usuniemy sobie ten background z naszego cube'a,
no i stwórzmy pozostałe ściany
Chcielibyśmy aby tylna ściana miała obramowanie pochodne czerwonemu, ustawimy sobie z-index na 1,
aby widzieć ten nasz element, no i chcielibyśmy obrócić tę naszą ścianę w osi X o 180 stopni.
Aby zobaczyć, że to faktycznie działa, możemy sobie wstawić tutaj jakiś napis "back", no i jak zobaczycie, gdy obrócimy sobie naszą kostkę o 180 stopni, właśnie w osi X, no to ona nam się odbiła tylko w tej osi,
nie jest widoczna po prawej stronie ekranu, coby miało miejsce, gdybyście zrobili po prostu samego rotate'a.
Lewą i prawą ścianę, będziemy obracali o 90 stopni - w lewo lub w prawo na osi Y, prawa ściana będzie miała kolor zielony,
no i lewa ściana - taki ciemny granatowy.
Górna i dolna ściana będą obrócone analogicznie o 90 stopni w osi X,
z czego top będzie miał żółte obramowanie,
a bottom będzie obrócony o -90 stopni i będzie miał białe obramowanie
Jednak teraz jak zauważycie, jakbyśmy ustawili sobie, załóżmy na każdej ze ścian opacity, tylko dwa divy są tak naprawdę widoczne.
Ten nasz przedni i tylny - back, który ma tutaj ten napis.
Dzieje się to dlatego, bo nie ustawiliśmy po pierwsze - żadnej perspektywy, a po drugie - jeżeli obracamy elementy o 90 stopni,
to one nam znikają wizualnie w CSSie, ponieważ jako takie nie mają głębokości, a patrzymy na nie od boku.
Więc ustawmy sobie perspektywę, powiedzmy na 1000px
i na każdej ze ścian zróbmy przesunięcie, w osi Z czyli tak naprawdę na głębokość o 100px.
Jak widzicie, coś tu już tutaj się stało, to zaaplikujemy sobie tę własność do każdej z naszych reguł, to tak naprawdę widzimy już tą naszą kostkę, tak?
To jest nasza dolna ściana, tu jest lewa, górna, prawa,
no i oczywiście przednia wraz z tylną na siebie nachodzą.
Kolejność parametrów w transformie ma znaczenie,
ponieważ gdybyście spróbowali dokonać tego przesunięcia translateZ przed samym obrotem, no to widzicie, to niestety nie zadziała,
po prostu kolejność transformacji ma w tym wypadku znaczenie.
Może zdejmijmy to opacity na ten moment
i ustawmy jakieś już tło dla każdej z naszych ścian,
to będzie pochodna fioletowego z palety barw koduje.
W tym momencie nie widzimy naszej przedniej ściany,
ale tak naprawdę nie ma to większego znaczenia.
Wyobraźmy sobie, że chcielibyśmy tak naprawdę obrócić tę kostkę
i ustawić tak naprawdę lewą jej stronę, tak aby była widoczna z przodu.
No to spróbujemy nadać na naszym cube'ie taką klasę .show-left,
że obrócimy sobie samego cube'a, o wartość przeciwną obrotu w jego osi, czyli w tym wypadku 90 stopni, bo tutaj go obracaliśmy o -90 stopni.
Gdy spróbujemy sobie nadać taką klasę, te usuniemy, to gdy wpiszemy sobie show-left, to niestety nie widzimy tej ściany.
Dlaczego tak się dzieje?
Ponieważ jest taka własność jak transform-style
i ona definiuje zachowanie transformacji dla dzieci elementu.
Jego domyślną wartością jest flat, czyli on tak naprawdę spłaszcza do swoich wymiarów - że tak powiem - transformację swoich potomków,
natomiast jeśli ustawicie transform-style na wartość preserve-3d,
to jak zobaczycie, już wszystko wygląda w porządku.
W tym momencie tak naprawdę gdybyśmy przełączali sobie obecność tej klasy, no to zmienia nam się ściana, która jest widoczna, tak?
Ta ciemna to jest nasza zielona ściana, no i domyślnie pokazujemy naszą przednią ścianę. Tak naprawdę wystarczy w tym momencie dodać tylko i wyłącznie tranzycję na naszym rodzicu i teraz w momencie przełączania tej klasy, jak widzicie mamy już bardzo fajną animację obrotu naszej trójwymiarowej kostki.
Oczywiście powinniśmy stworzyć adekwatne klasy show-right, show-bottom itd., więc zrobimy to szybciutko pamiętając, że musimy po prostu odwrócić wartość tej transformacji, którą zrobiliśmy na samych ścianach
No i teraz jak zobaczycie show-bottom obróci nam kostkę w dół,
show-right obróci w prawo, show-back pokaże nam tył kostki itd.
Pozostaje tylko ozdobić nieco naszą kostkę i nasz przykład jest gotowy.
Oczywiście możecie napisać kontrolki w JavaScriptcie,
tak by kostka obracała się w tę stronę, którą chcecie,
np. przy pomocy klawiatury, czy odpowiednich elementów na samej stronie.
Jeżeli interesowałyby was takie zagadnienia koniecznie dajcie nam znać w komentarzu.
Podobało wam się to wideo?
Jeśli tak, koniecznie dajcie nam znać w komentarzu,
żebyśmy mogli stworzyć więcej tego typu materiałów
Nie ma czego się obawiać, to jedna z podstawowych właściwości współczesnej sieci :)
Nie mam nic do ukrycia! Eksperymentuj z moimi przykładami :)
Cześć! Nazywam się Wojciech Połowniak i jestem programistą Fullstack z zacięciem do tworzenia jakościowych materiałów szkoleniowych.
Uwielbiam automatyzację, VR oraz interaktywne sposoby przekazywania wiedzy. Tematy takie jak UX, dostępność czy devops również nie są mi obce.
Jestem też organizatorem meet.js oraz Techspeakerem pod banderą Mozilli... A to jeszcze nie wszystko.
Na wyciągnięcie ręki. Za darmo, na YouTube
W tym wideo dowiesz się jak wykorzystać zaawansowane selektory CSS aby stworzyć dostępny system oceny gwiazdkami.
Jedna prosta właściwość która potrafi zmienić życie front-end developera.
SVG to świetny format grafik wektorowych. Zobacz co się stanie, gdy dodamy animacje!
W tym wideo opowiem Ci czym są i jak działają pseudoelementy.
Świetny sposób na prezentacje dodatkowych informacji o danym bloku - najedź myszką i zobacz co jest po drugiej stronie!
W tym wideo przedstawię Ci najważniejsze aspekty właściwości position.
Jeśli chcesz być na bieżąco z najnowszymi inicjatywami od twórców koduje? Zapisz się na newsletter - nie spamujemy!
W przyszłości, możemy udostępnić Ci informacje o dodatkowych kursach naszego autorstwa.