Ostatnia aktualizacja: 

Trójwymiarowa kostka w
samym CSS

Perspektywa pozwala na tworzenie pseudo-trójwymiarowych obiektów, bez konieczności znajomości technologii takich jak WebGL

CSS
Tutorial
3D
Animacja
08m 43s
13000+ wyświetleń
401+ pozytywnych reakcji

animacje 3d w samym CSS?

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.

Opinie

Komentarze widzów

Wasze opinie liczą się najbardziej, materiały Tworzymy dla was!
Oto wybrane komentarze które zostawiliście pod tym wideo!

  • Sam siedzę w backendzie, ale Wasze materiały niezmiernie mnie ciekawią. Z frontu jestem noga, no po prostu nie mam wyobraźni do tych kolorów i styli, więc dla mnie to, co prezentujecie to czysta magia!

  • Bardzo fajne i bardzo profesjonalne :)

  • świetna robota - cały ten projekt / kanał to strzał w dziesiątkę. Dzięki!

  • Brak mi słów :) kopara do dołu. Kozak opcja nawet nie wiedziałem ze tak sie da

    Jan Olszewski
    Zobacz komentarz
  • Mega, super wiedza, i powiem, że nigdzie takiej nie znalazłem, no dobra, dokumentacja, ale tu pokazuje się w praktyce :]

    Przemek Bartecki
    Zobacz komentarz
  • Mega, super wiedza, i powiem, że nigdzie takiej nie znalazłem, no dobra, dokumentacja, ale tu pokazuje się w praktyce :]

    Przemek Bartecki
    Zobacz komentarz
  • Fajnie ogląda i słucha się Waszych produkcji :)

  • Jesteście najlepsi ;-)

Transkrypt wideo

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

10 kwietnia 2022

Komentarz od autora

To ciekawy i prosty sposób na urozmaicenie swojej strony niskim kosztem - jest to bardzo wydajne i lekkie rozwiązanie. Nie jest jednak intuicyjne w implementacji.

Jeśli miałbym coś usprawnić w oryginalnym rozwiązaniu, to po pierwsze pozbyłbym się selektora bezpośredniego dziecka czyli .cube > div i zastąpił go .cube div. W tym
konkretnym przypadku, kostka będzie działać tak samo a kod będzie wydajniejszy i elastyczniejszy.

Inna kwestia, że część klas czy przekształceń mogłaby zostać wygenerowana, przy pomocy dowolnego preprocesora CSS.

Wsparcie perspective według CanIUSE

Nie ma czego się obawiać, to jedna z podstawowych właściwości współczesnej sieci :)

Data on support for the mdn-css__properties__perspective feature across the major browsers

Zobacz kod źródłowy

Nie mam nic do ukrycia! Eksperymentuj z moimi przykładami :) 

Poznaj Wojtka

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.

Chcesz więcej?

Nie ma sprawy! Koduje to długie godziny darmowej treści dostępnej na wyciągnięcie ręki.

Newsletter

Jeśli chcesz być na bieżąco z najnowszymi inicjatywami od twórców koduje? Zapisz się na newsletter - nie spamujemy!

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

W przyszłości, możemy udostępnić Ci informacje o dodatkowych kursach naszego autorstwa.

Najczęściej zadawane pytania

Jaka tematyka jest poruszana na Koduje?
expand_more
Mówimy o HTML, CSS i JavaScript - zarówno na backendzie, jak i frontendzie. Tematyka taka jak Devops, architektura i infrastruktura oprogramowania również pojawią się na kanale!
Czy mogę zaproponować temat kolejnych wideo?
expand_more
Oczywiście, że tak! Najlepiej sugerować materiały w sekcji komentarzy na YouTube 
Jak to możliwe, że Koduje jest darmowe? 
expand_more
Moją pasją jest dzielenie się wiedzą w sposób zrozumiały i klarowny, jednocześnie interaktwny i angażujący. Tworząc materiały, utrwalam też własną wiedzę. Wierzę, że za to widzowie nie powinni płacić
W sieci można znaleźć strony przypominające do koduje.pl, o co chodzi?
expand_more
Niestety, na przełomie lat wiele osób próbowało podszyć się pod Koduje i wykorzystać nasze materiały do promocji własnych kanałów dystrybucyjnych.  Jeśli masz wątpliwości, czy dana strona współpracuje z Koduje - daj nam o tym znać. Nie pochwalamy piractwa, plagiatu ani szarej strefy prawa autorskiego.
Czy prowadzicie szkolenia indywidualne?
expand_more
W chwili obecnej, niestety nie. Na przełomie lat prowadziłem kursantów przez ich przygodę z programowaniem, z czego każdy otrzymał pracę jako programista. Jeśli jesteś zainteresowany lekcjami indywidualnymi, zapraszam do kontaktu mailowego.
Czy oferujecie płatne kursy?
expand_more
W przyszłości nie wykluczamy możliwości tworzenia dedykowanych kursów o danych zagadnieniach. Zapisz się na nasz newsletter, aby być na bieżąco z naszymi najnowszymi płatnymi materiałami.
Jak mogę się z wami skontaktować?
expand_more
Czytamy komentarze na YouTube! Śmiało możesz zadać pytanie na dowolny temat pod którymkolwiek z naszych wideo. Poza tym możesz skontaktować się z nami mailowo bądź poprzez fanpage na Facebooku
Obecnym właścicielem marki jest Wojciech Połowniak. Zobacz zakładkę o nas!