Accentsconagua
Share
Ne inspirăm acest tutorial din ultima inițiativă a lui Envato; Envato Elements. Pagina de pornire a elementelor Elements oferă o gamă largă de produse creative (fonturi, pictograme, șabloane grafice și așa mai departe) care le afișează împreună pe o structură izometrică.
Pagina principală a Elementelor Vom recrea acest peisaj izometric folosind CSS 3D Transforms.
Proiecția izometrică este o metodă (folosită în mod obișnuit în inginerie și jocuri în anii 80 și 90, când puterea de procesare 3D a fost foarte limitată) pentru a prezenta un design în trei dimensiuni aparente.
Unele obiecte vizualizate utilizând proiecția izometrică. Imagine de Wikipedia. Acestea nu sunt trei dimensiuni pe măsură ce le vedem în viața reală - planul pe care sunt afișate este lipsit de perspectivă.
Timp de mulți ani, țesătura a fost un mediu bidimensional și suntem obișnuiți să poziționăm elementele de-a lungul a două axe sau direcții: axa x (orizontală) și axa y (verticală).
Notă: axa y de pe web este inversată, contrar principiului original al coordonatelor carteziene, deoarece rețeaua este citită de sus în jos.
A treia axă, și anume axa z, este necesară pentru a proiecta o vedere 3D. Această axă reprezintă adâncime, iar direcția de mișcare a unui obiect de-a lungul axei z este relativă la punctul nostru de vedere; se poate mișca de sus în jos, în sus sau în jos.
Cele trei axe x, y și z în plan 3D. Imagine de către W3C. Aceste trei axe pot fi aplicate funcției Transformare CSS pentru a crea o proiecție 3D. În următoarea demonstrație, folosim rotateX (), rotateY (), și rotateZ () funcția de a crea o proiecție izometrică a unui dreptunghi:
Acum, că avem principiul de bază care sta la baza unei proiecții izometrice, putem pune în practică. Și începem cu HTML.
Similar cu pagina de pornire a Envato Elements, avem un aspect de rețea. Grilă noastră cuprinde un rând cu nouă coloane. Fiecare coloană conține o imagine a produsului, legătura care indică pagina produsului și după cum puteți vedea mai jos, a deschidere element pe care îl vom folosi pentru a modela umbra imaginii.
Începem cu stilurile care resetează stilurile implicite ale anumitor elemente.
html box-size: border-box; *, *: înainte, *: după box-size: moștenire; img max-lățime: 100%; înălțime: auto; afișare: bloc; figura marja: 0;
Aceste stiluri fixează toate elementele box-dimensionare, care va face determinarea dimensiunii totale a elementului mult mai ușor de prevăzut. De asemenea, setăm redarea imaginilor la bloc pentru a elimina acel mic spațiu alb din partea de jos a imaginii. Și, în final, eliminăm figura marginea elementului care înfășoară imaginea.
Apoi continuăm cu stilurile rândului și coloanelor.
.rând lățime: 960px; afișaj: flex; flex-wrap: folie; justifică-conținut: flex-end; transforma: rotateX (60deg) rotateY (0deg) rotateZ (-45deg); coloană padding: 20px; lățime: 50%; max-lățime: 50%; flex: 1 1 50%;
Stilurile de mai sus au setat rândul la afișare: flex, setați stilurile de transformare la 3D astfel încât browserele să adere corect la transformarea axei z, să rotească rândul pentru a crea o vedere izometrică și, în cele din urmă, să împartă coloanele din rândul în jumătate.
Apoi, trebuie să adăugăm stilurile care poziționează elementele copilului rândului și coloanei în vizualizarea 3D. Acest stil următor este esențial. transform-stil: conserve-3d trebuie să fie declarate pe fiecare element înfășurat sub .rând, astfel încât acestea vor fi redate corect în spațiul 3D - în mod specific, în Firefox - iar axa Z va intra în vigoare.
.rând, coloană, .ItemCard, .ItemCard__dest, .ItemCard__thumb poziție: relativă; spate-vizibilitate: ascuns; stilul transformat: păstrați-3d;
Apoi, adăugăm stiluri la .acoperi clasa pe care am adăugat-o la eticheta anchor link-ul produsului și deschidere element (curând să fie umbra).
.acoperi display: bloc; poziția: absolută; top: 0; stânga: 0; lățime: 100%; înălțime: 100%;
Având acest stil adăugat, legătura produsului, precum și deschidere Elementul se întinde acum tot parcursul containerului. De asemenea, putem schimba mai târziu pozitia stiva de elemente.
Următoarele stiluri guvernează poziția elementului de împachetare a imaginii, umplutura și unele chestii 3D. fata de jos vizibilitate este setat astfel încât nu vom vedea prin stiva sub elementul tradus sau rotit și nu vom vedea fața inversată a imaginii.
Aplicăm tranziția spre imagine și se deplasează prin axa z pentru ao face să "leviteze" deasupra "umbrei 15px. În mod similar, adăugăm și câteva elemente 3D: fata de jos vizibilitate și transforma în stil, astfel încât va face vizualizarea 3D în mod corespunzător.
.ItemCard__thumb img poziție: relativă; z-index: 1; tranziție: transformă 0,3s cubic-bezier (0,165, 0,84, 0,44, 1); transformă: traduce3d (0, 0, 20px);
Următoarele ne oferă stilurile noastre de umbră. Distribuția umbrei ar trebui să fie îngustă, iar umbra mai întunecată, deoarece imaginea, în acest moment, este mai aproape (prin 15px) la "podea" unde se reflectă umbra.
.umbra display: bloc; tranziție: toate 0,3s cubic-bezier (0,165, 0,84, 0,44, 1); opacitate: 0,9; fundal-culoare: rgba (0, 0, 0, 0,1); box-shadow: 0 0 5px 1px rgba (0, 0, 0, 0,1);
Am făcut destul de multe progrese:
Observați colțul rotunjit și umbra se întinde sub imagine.Efectul de hover va face ca fiecare miniatură de imagine să fie mai atrăgătoare.
.coloana: hover .ItemCard__dest z-index: 10; coloana: hover .ItemCard__dest, coloana: hover .ItemCard__thumb img transform: traducere3d (0, 0, 50px) rotateX (-5deg); transformare-origine: fund central; coloana: hover .ItemCard__thumb .shadow opacitate: .6; fundal-culoare: rgba (0, 0, 0, 0,1); box-shadow: 0 0 10px 6px rgba (0, 0, 0, 0.1);
În starea de hartă, așa cum se arată în fragmentul de cod de mai sus, vom muta mai întâi elementul de stivă mai sus, astfel încât imaginea (și linkul) vor apărea deasupra restului elementelor din cadrul grila.
De asemenea, vom ridica ușor imaginea; îndepărtându-l de "podea" și puțin mai aproape de sursa "lumină". Acestea fiind spuse, umbra ar trebui sa piarda o anumita claritate, asa ca am scazut opacitatea umbrei.
Elementul de tip hover-state este levitat mai sus decât restul și este înclinat ușorÎn acest tutorial, am folosit transformări 3D în CSS pentru a construi o replică a rețelei izometrice Envato Elements. Am învățat, de asemenea, cum să adăugăm realismul în ceea ce privește umbrele și sursele de lumină. Aruncați o privire la demo, luați fișierele sursă și spuneți-ne ce faceți cu ei!
Transformările 3D sunt un utilitar CSS puternic. Dar nu le considerați doar un truc sau o jucărie pentru a adăuga un strat fantastic pe web. Dacă este aplicată cu grijă, elementele 3D pot rezolva și unele probleme de design notorii.
