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 :-)


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.