Efektowne kafelki z treścią i trochę o transformacjach 3D

Efektowne kafelki z treścią i trochę o transformacjach 3D

O tym, że od pewnego czasu na stronach internetowych rządzi układ typu „kafelki” nikomu udowadniać chyba nie trzeba. W gąszczu nudnych i powtarzających się schematów warto przebić się czymś nieco ciekawszym. W tym artykule dowiesz się jak stworzyć efektowne kafelki z treścią. Przy okazji zobaczysz jak działa perspektywa i transformacje CSS.

Transformacje CSS

Jakiś czas temu napisałem już krótki tutorial wykorzystujący transformacje 3D. Dziś chciałbym jednak ten temat opisać nieco szerzej.

Nie zagłębiając się w definicje z pogranicza matematyki i informatyki, można powiedzieć, że transformacje to przekształcenia powodujące zmianę kształtu, położenia i rozmiaru elementu w przestrzeni trójwymiarowej. W interpreterze CSS do transformacji wykorzystujemy właściwość transfrom, która pozwala dokonać kilku rodzajów przekształceń. Niektóre z nich wykorzystałem w przykładzie demo.

  • transform: translate3d(x,y,z) – to przekształcenie polega na przesunięciu elementu w przestrzeni. Sterując wartościami x, y i z możemy dowolnie przemieszczać element, nie wpływając na zachowanie innych elementów strony. Dla przekształceń dwuwymiarowych możemy użyć również transform: translate(x,y), natomiast dla jednowymiarowych kolejno transform: translateX(x), transform: translateY(y) oraz transform: translateZ(z).
  • transform: rotate(deg) – to nic innego jak obrót elementu o zadany kąt w stopniach. Na przykład transform: rotateY(180deg) spowoduje obrót elementu o 180º względem osi Y (pionowej).
  • transform: scale(n) – skalowanie elementu. Domyślnie początkową wartością, z jaką przeglądarka wyświetla elementy jest scale(1). Oznacz to, że scale(1.2) powiększy optycznie element o 20% a scale(0.5) zmniejszy go o połowę.
  • transform: skew(deg)– przekształcenie polegające na skrzywieniu/nachyleniu elementu o zadany kąt. Podobnie jak przypadku poprzednich właściwości, możemy skrzywić element w dowolnym kierunku i wymiarze.

Perspektywa

Właściwość perspective nie należy do najprostszych do wyjaśnienia zagadnień. Definiuje położenie elementu względem widoku i dotyczy tylko transformacji trójwymiarowych. Informacją ważną do zapamiętania jest to, że perspektywa działa zawsze dla elementów potomnych – nigdy na sobie samym. Aby lepiej zrozumieć działanie tej właściwości odsyłam Was do przykładu przygotowanego przez W3Schools.

Back face visibility

Kolejną właściwością CSS, o której warto pamiętać to backface-visibility. Własność ta może przyjąć dwie wartości: visible (domyślnie) oraz hidden. O ile w transformacjach dwuwymiarowych nie ma większego znaczenia, o tyle nabiera znaczenia przy transformacjach 3D. „Back face” dotyczy widoczności tylnej strony elementu podczas transformacji. Dobrym przykładem do wyjaśnienia jej działania jest właśnie ten którego dotyczy artykuł. W momencie gdy kafelek obraca się względem osi Y, nie chcemy aby jego druga strona była widoczna dla użytkownika. Z tego właśnie powodu dla elementów klasy .front oraz .back nadałem backface-visibility: hidden.

Efekt obrotu kafelków

Na koniec kilka słów wyjaśniających mój przykład. Każdy z kafelków składa się z dwóch elementów: front oraz back. Po wyświetleniu bloków, strona frontowa nie jest w żaden sposób przekształcona, natomiast tylna jest obrócona o 180º względem osi Y. Po najechaniu na kafelek wskaźnikiem myszy dzieje się odwrotnie: strona przednia obracana jest o -180º a strona tylna z tekstem powraca do 0º.

Oprócz tego, wykorzystałem transformacje aby uzyskać efekt paralaksy. Tekst strony frontowej jak i tylnej jest przesuwany względem osi X o kilkadziesiąt pikseli. Dzięki temu animacja zyskuje wrażenie wypukłości, co jeszcze bardziej podkreśla jej charakter.

Zachęcam do zapoznania się z przykładem. Można go dowolnie wykorzystywać ww własnych realizacjach jak i w celach rozwojowych a w najgorszym wypadku poznacie kilka ciekawostek dotyczących kosmosu :-)


Popularne wpisy

Kodowanie

Responsywne menu — 3 sprawdzone rozwiązania

Responsywne menu — 3 sprawdzone rozwiązania

Czytaj to
Mixiny SCSS – czyli jak uprzyjemniam sobie pracę

Mixiny SCSS – czyli jak uprzyjemniam sobie pracę

Czytaj to

Felietony

Błędy początkujących webmasterów, których warto unikać

Błędy początkujących webmasterów, których warto unikać

Czytaj to
Dlaczego frameworki HTML często nie mają sensu?

Dlaczego frameworki HTML często nie mają sensu?

Czytaj to

Inspiracje

Zestaw prostych i ciekawych przycisków na stronę

Zestaw prostych i ciekawych przycisków na stronę

Czytaj to
Najlepsze strony, z których pobierzesz darmowe zdjęcia

Najlepsze strony, z których pobierzesz darmowe zdjęcia

Czytaj to

Newsletter

Maksymalnie raz w miesiącu dostaniesz powiadomienie o nowych wpisach.
Zapisz się do newslettera — ja nie śmiecę.

Ta strona wykorzystuje pliki cookies wyłącznie w celach statystycznych.