Accentsconagua
Share
Vi drar inspiration till denna handledning från Envatos senaste initiativ; Envato Elements. Elements hemsida har en rad kreativa produkter (teckensnitt, ikoner, grafiska mallar och så vidare) som visar dem tillsammans på en snygg isometrisk rutnätlayout.
Elements hemsida Vi kommer att återskapa detta isometriska landskap med hjälp av CSS 3D Transforms.
"Isometrisk projicering" är en metod (vanligtvis används inom teknik och spel på 80-talet och 90-talet där 3D-bearbetningskraften var mycket begränsad) för att presentera en design i tydliga tre dimensioner.
Några objekt betraktas med isometrisk projektion. Bild på Wikipedia. Det här är inte tre dimensioner när vi upplever dem i verkligheten - planet som de visas på saknar perspektiv.
Under många år har webben varit en tvådimensionell miljö och vi är vana vid att placera element längs två axlar eller riktningar: x-axeln (horisontal) och y-axeln (vertikal).
Notera: y-axeln på webben är omvänd i strid med den ursprungliga kartesiska koordinatprincipen, eftersom webben läses uppifrån och ned.
Den tredje axeln, nämligen z-axeln, är nödvändig för att projicera en 3D-vy. Denna axel representerar djup, och rörelseriktningen för ett objekt längs z-axeln är i förhållande till vår synvinkel; Det kan flytta uppifrån, nedåt eller nära långt.
De tre axlarna x, y och z i 3D-planet. Bild av W3C. Dessa tre axlar kan appliceras på CSS Transform-funktionen för att skapa en 3D-projektion. I följande demo använder vi rotateX (), rotateY (), och rotateZ () funktion för att skapa en isometrisk projicering av en rektangel:
Nu när vi har den grundläggande principen som ligger till grund för en isometrisk projicering, kan vi sätta den i praktiken. Och vi börjar med HTML.
På samma sätt som Envato Elements hemsida har vi en rutnätlayout. Vårt nät omfattar en rad med nio kolumner. Varje kolumn innehåller en produktbild, länken som pekar på produktsidan och som du kan se nedan, a spänna element som vi kommer att använda för att modellera bildskuggan.
Vi börjar med de stilar som återställer standardstilar för vissa element.
html box-size: border-box; *, *: före, *: efter box-size: arv; img maxbredd: 100%; höjd: auto; display: block; siffra marginal: 0;
Dessa stilar ställer in alla delar med box-dimensionering, vilket kommer att göra bestämningen av elementets totala storlek lättare förutsägbar. Vi ställer också in bildavbildningen till blockera för att ta bort den lilla blankbilden längst ner på bilden. Och äntligen tar vi bort figur elementmarginal som sveper bilden.
Sedan fortsätter vi med raden och kolumnerna.
.rad bredd: 960px; display: flex; flex-wrap: wrap; motivera-halt: flex-ände; transformera: rotateX (60deg) roteraY (0deg) rotateZ (-45deg); .kolumn vaddering: 20px; Bredd: 50%; max bredd: 50%; flex: 1 1 50%;
Ovanstående stilar anger raden till display: flex, sätt transformationsstilarna till 3D så att webbläsarna klarar sig korrekt på z-axeln, rotera raden för att skapa en isometrisk vy och slutligen dela kolumnerna i raden i hälften.
Därefter måste vi lägga till de stilar som placerar barnelementen i raden och kolumnen i 3D-vy. Den här stilen är väsentlig. De transform-stil: bevara-3d måste deklareras på varje element som är inslaget under .rad, så de kommer att bli korrekt gjorda i 3D-utrymme - speciellt i Firefox - och Z-axeln kommer att träda i kraft.
.rad, kolumn, .ItemCard, .ItemCard__dest, .ItemCard__thumb position: relative; backface-visibility: hidden; transform-stil: bevara-3d;
Därefter lägger vi till stilar till .omslag klass, som vi har lagt till produktlänkanker, och spänna element (snart vara skuggan).
.täcka display: block; position: absolut; topp: 0; vänster: 0; bredd: 100%; höjd: 100%;
Har du lagt till den här stilen, produktlänken samt spänna element sträcker sig hela vägen över behållaren. Vi kan också ändra elementstackposition senare.
Följande stilar styr bildpositionspositionen, vadderingen och några 3D-saker. De backface-synlighet är inställd så att vi inte ser igenom stapeln under det översatta eller roterade elementet och inte ser det inverterade ansiktet på bilden.
Vi tillämpar övergången till bilden och rör sig genom z-axeln för att göra det "levitate" ovanför "skuggan av 15px. På samma sätt lägger vi till några 3D-saker: backface-synlighet och omvandla stil, så det kommer att göra 3D-vyn ordentligt.
.ItemCard__thumb img position: relative; z-index: 1; övergång: transformera 0,3s kubisk-bezier (0,165, 0,84, 0,44, 1); transformera: translate3d (0, 0, 20px);
Följande ger oss våra skuggstilar. Skuggans spridning bör vara smal och skuggan skuggas mörkare eftersom bilden, vid denna punkt, är närmare (vid 15px) till "golvet" där skuggan återspeglas.
.skugga display: block; övergång: alla 0,3 kubisk-bezier (0,165, 0,84, 0,44, 1); opacitet: .9; bakgrundsfärg: rgba (0, 0, 0, 0,1); boxskugga: 0 0 5px 1px rgba (0, 0, 0, 0,1);
Vi har gjort ganska många framsteg:
Lägg märke till det avrundade hörnet och skuggan sprid sig under bilden.Huver-effekten gör varje bildminnebild mer engagerande.
.kolumn: svävar.ItemCard__dest z-index: 10; .column: hover .ItemCard__dest, .column: sväva .ItemCard__thumb img transform: translate3d (0, 0, 50px) rotateX (-5deg); transformations-ursprung: centrum botten; .column: hover .ItemCard__thumb .shadow opacity: .6; bakgrundsfärg: rgba (0, 0, 0, 0,1); boxskugga: 0 0 10px 6px rgba (0, 0, 0, 0,1);
I hover-tillståndet, som visas i ovanstående kodbit, flyttar vi först elementstapeln högre, så bilden (och länken) kommer att visas över resten av objekten i rutnätet.
Vi lyfter också bilden något; flytta den bort från "golvet" och lite närmare "ljuskällan". Det sägs att skuggan borde förlora viss klarhet, så vi minskar skuggens opacitet.
Huvud-staten objektet levitated högre än resten och tippade någotI denna handledning har vi använt 3D-transformer i CSS för att bygga en replik av Envato Elements isometriska nät. Vi lärde oss också att lägga till realism när det gäller skuggor och ljuskällor. Ta en titt på demo, ta tag i källfilerna och låt oss veta vad du gör med dem!
3D Transforms är ett kraftfullt CSS-verktyg. Men betrakta dem inte bara en gimmick eller en leksak för att lägga till ett fint lager på nätet. Om det tillämpas eftertänksamt kan 3D-element också lösa några notoriska designproblem.
