Hvordan lage en CSS-kube (2024)

CSS-kuber viser virkelig hva CSS har blitt gjennom årene, og utvikler seg fra enkle farge- og dimensjonsdirektiver til et språk som er i stand til å skape dype, kreative bilder. Legg til animasjon og du har noe veldig pent. Dessverre er hver CSS-kubeopplæring jeg har lest litt lang og en blander visuell stil med det grunnleggende om kube, så jeg har bestemt meg for å skrive et innlegg som gir akkurat de grunnleggende detaljene som trengs for å lage en CSS-kube. Jeg baserer mitt eksempel på en eneståendeCodePen-demoav Mircea Georgescu.

HTML-en

Kubeelementet, en innpakning i seg selv, vil faktisk ha en egen innpakning:

foran
bak
 øverst
nederst
venstre
høyre
 div>
Hver side av kuben vil ha sitt eget element. Som du kan forestille deg, vil vi være CSS-ing ut av dem for å sette dem i riktig posisjon.
CSS
La oss ta dette en meningsfull bit om gangen. Det første meningsfulle elementet er hele animasjonsinnpakningen, som vil gi enCSS-perspektivfor 3D-elementet:
.wrap {perspective: 800px;perspective-origin: 50% 100px;}
CSS-perspektiv er et vanskelig konsept å forklare, men MDN gjør en god jobb, så jeg vil ikke duplisere forklaringen deres. For bedre å forstå perspektivet, anbefaler jeg å endre perspektivegenskapen for å se hvordan den påvirker demoen. Neste opp er kubebeholderen som vil inneholde alle de forskjellige kubeflatene:
.cube {posisjon: relativ;bredde: 200px;transform-stil: preserve-3d;}
Kuben vil være 200 piksler bred, med relativ plassering slik at de absolutt plasserte flatene holder seg innenfor grensene. Vi vil også bruke preserve-3d for å holde elementet 3D og ikke flatt. Før du kommer til noen av de spesifikke ansiktsreglene, vil det være noen generelle stiler som vil gjelde for hvert ansikt:
.cube div {posisjon: absolutt;bredde: 200px;høyde: 200px;}
Med posisjonen og dimensjonene til ansiktene satt, kan vi komme til å lage transformasjonskoden for individuelle ansikter:
.tilbake {transform: translateZ(-100px) rotateY(180deg);}.right {transform: rotateY(-270deg) translateX(100px);transform-origin: øverst til høyre;}.venstre {transform: rotateY(270deg) translateX( -100px);transform-origin: center left;}.top {transform: rotateX(-90deg) translateY(-100px);transform-origin: top center;}.bottom {transform: rotateX(90deg) translateY(100px); transform-origin: bottom center;}.front {transform: translateZ(100px);}
RotateY-verdiene roterer ansiktene til for å flytte ansiktet viser teksten i riktig vinkel, menstranslateZinnstillingen flytter elementene fremover og bakover i stabelen. DeoversettYInnstillingen kan være forvirrende, men merk at den representerer å heve eller senke et ansikt for å vise 3D-effekt via de gjennomsiktige rutene. Hvert ansikt har sine egne oversettelsesinnstillinger for å plassere dem på riktig sted, så modifiser gjerne disse verdiene for å se hvorfor hver tilsvarer ansiktet.
Se demo
Horisontal spinning av kuben
Selvfølgelig, hva hjelper et 3D-elementsett uten å animere det. Svaret: ingen. Ikke bra i det hele tatt. Så her er noen få skritt vi må ta for å få vår dyrebare kube til å animere horisontalt:
@keyframes spin {fra { transform: rotateY(0); }to { transform: rotateY(360deg); }}.cube {animasjon: spin 5s uendelig lineær;}
Sannsynligvis enklere enn du tror, ​​ja? Teksten ser riktig ut på grunn av motrotasjonen vi implementerte opprinnelig, og jeg har brukt keyframe-animasjon i tilfelle vi ønsker å legge til mer sexiness i fremtiden.
Vertikal spinning av kuben
Å spinne kuben vertikalt burde enkelt kreve å endre animasjonen til Y-aksen, ikke sant? Dessverre ikke -- rutene som de er vil vise tekst bakover i noen tilfeller, så vi må revidere rotasjonen av noen få elementer:
@keyframes spin-vertical {fra { transform: rotateX(0); }to { transform: rotateX(-360deg); }}.cube-wrap.vertical .cube {margin: 0 auto; /* holder kuben sentrert */transform-origin: 0 100px;animasjon: spin-vertical 5s infinite linear;}.cube-wrap.vertical .top {transform: rotateX(-270deg) translateY(-100px);}.cube -wrap.vertical .back {transform: translateZ(-100px) rotateX(180deg);}.cube-wrap.vertical .bottom {transform: rotateX(-90deg) translateY(100px);}
... samt endre animasjonen.
Å flate ut kuben
For å fjerne 3D-utseendet til kuben, og ganske enkelt vise én blokk om gangen (uten andre ansiktsantydninger), fjern perspektiv- og opprinnelsesinnstillingene fra omslaget:
.wrap {/* ikke mer perspektiv */perspective: none;perspective-origin: 0 0;}
Nå vil det eneste ansiktet vises til enhver tid.
Se demo
CSS-kuber har eksistert en stund, men jeg håper denne artikkelen forenklet komposisjonen deres nok til at du kan angripe din egen. Og ikke bli motløs hvis du får problemer med å lage kuben din – det gjorde jeg også! Gleder meg til å se hva du lager!
 
   
 
   
Fredrik
Bare et notat, Firefox håndterer kuben på samme måte som Chrome, hvis du legger tilpxetter den numeriske verdien, som angitt her:https://developer.mozilla.org/en-US/docs/Web/CSS/perspective:perspektiv: 800px;
David Walsh
Utmerket - oppdatert og fungerer bra!
Christian Weber
Jeg elsker hvordan CSS har utviklet seg de siste årene. Det har gått fortere og raskere. :) Jeg lurer på hvor den er om 5 år^^
OssianGrr
Hvor mye mer komplisert ville det være å rotere kuben diagonalt?
David Walsh
Å endre perspektiv-opprinnelsen vil tillate deg å gjøre det!
Cliff Pyles
Takk for flott opplæring! Jeg brukte den til en CodePen jeg jobbet med.http://codepen.io/cliffpyles/pen/LHlqa
Joe Steadman
Takk for tips og kode, dette er veldig nyttig!
Mathew Porter
Fantastisk demo, som du sier det er flott å se hvor langt css har utviklet seg og utviklet seg, spennende å se hvor ting går.
Richard Bagnall
Fin artikkel og demo. Så synd at FF ikke anti-aliaser så godt som Chrome gjør, men det er i det minste ikke like bukser som Opera og IE10 som fortsatt ikke er med på noe av dette :-(
Jeff Tackett
Visste du at hvis du legger til en gjennomsiktig ytre boksskygge på 2px eller mer, vil Firefox gjengi kantutjevnet.
box-shadow: 0px 0px 30px rgba(125, 125, 125, 0.8) innfelt, 0 0 4px rgba(0, 0, 0, 0);
Ivan Banov
Hei, se plugin-en min for å automatisere dette arbeidet :)
http://github.com/ivanbanov/polygonJS
Ron
"RotateY-verdiene roterer ansiktene til for å flytte ansiktet viser teksten i riktig vinkel" den teksten leses ikke så godt.
Steve
Dette er utrolig!
Noen ideer om hvordan man får det til å fungere på IE 10?
Jeff Ballweg
IE10 fungerer ikke fordi metoden beskrevet her krevertransform-stil: bevar-3d;skal påføres. I utgangspunktet, i metoden ovenfor, lager du en boks ved å transformere hver av 6 ansikter, pakk disse ansiktene inn i en beholder, og animer deretter beholderen (og dens innhold) i 3D-rom. IE10 utfører 3d-transformasjoner, men den vil ikke beregne en 3d-transform i en annen 3d-transform.
For å få det til å fungere, kan du transformere og animere hvert ansikt i forhold til et sentralt punkt. Vær oppmerksom på at hvert ansikt også må vende i riktig retning for at tekst skal gjengis riktig.
Se Pen Pharma-pakken i CSS (@jeffballweg).
">http://codepen.io/jeffballweg/pen/ogxeaB/) av Jeff Ballweg (@jeffballweg).
@jeffballweg)." data-user="jeffballweg">
Roshdy
Veldig fin tutorial.
Jeg sliter bare med å lage kuben i % i stedet for px
Kan det gjøres?
Tips Hus
Takk - veldig nyttig.
Ser ikke ut til å fungere riktig på Chrome 31.
David Walsh
Fungerer for meg på Mac / Chrome 31.
Andrea
Interessant innlegg! Dessverre går Demo-lenken din til Firefox-animasjonen (fire tail). Dette var i hvert fall sant 10. februar 2014. Skulle gjerne sett demoen for å finne ut om jeg burde lese artikkelen mer detaljert. Takk…
David Walsh
Viser riktig for meg:http://davidwalsh.name/demo/css-cube.php
Andrea
Ser ut til å fungere nå ... takk ...
Francis Underwood
Ville det vært mulig å gjøre kuben mindre? Jeg har ikke klart å få alt til å stemme når jeg prøver. Dette er en fantastisk demo forresten! Takk for at du delte!
Ukjent
Hei, hvordan bygger man en "blokk"-form?
Jeg mener høyden og bredden er forskjellig
Jordan Leigh
Sjekk ut 3d-kuben min med roterende sider, den bruker mus og berøringshendelser for å tillate deg å flytte den, samtidig som innholdet på hver side roteres på riktig måte.
http://jordizle.com/demo/376/3d-interactive-cube-with-rotating-sides-using-css3-and-javascript/
Rafael
Jeg har en kube med ulike rotasjoner, og ønsker å ha en mer realistisk skygge (egentlig en ellipse). Så jeg laget denne koden for å emulere den, basert på koden din:
http://jsfiddle.net/ktuw2rbr/
Er kun laget for Chrome (senere vil jeg endre den). Rotasjonen er uendelig, og jeg vil unngå det siste spranget mot klokken i skyggen min.
Noen idé om å løse dette problemet?
Damon Smith
fungerer veldig bra for meg i linux firefox og chromium. Jeg slet med det fordi jeg ønsket å bruke prosenter i stedet for absolutte størrelser, men prosentstørrelser fungerer ikke med den roterende kuben. Men jeg fant ut at hvis jeg brukte VW-enheter, kunne jeg få den størrelsen jeg ønsket og få den til å fungere med den roterende kubestilen. Ikke en løsning for alle, jeg er sikker på, men fortsatt nyttig for mange situasjoner.
Cathy Mayhue
Veldig fint! Det var morsomt å følge disse instruksjonene og lage noe helt fantastisk!
Cathy Mayhue
Ta ferdigheter i CSS-koding til et nytt nivå! Skikkelig fint stykke kode å fikle med og bruke det som grunnlag for å lage andre figurer.
Jason Clemens
Flott opplæring ... takk! Bare en liten merknad: syntaktisk forventer transform-origin-egenskapen x-aksen (venstre|senter|høyre), deretter y-aksen (øverst|senter|bunn). Jeg fikk lo-feil helt til jeg innså at demoen din har dem reversert (dvs. midt til venstre). Heldigvis kan de fleste nettlesere tolke disse riktig.
http://www.w3schools.com/cssref/css3_pr_transform-origin.asp
damiano
Dette fungerer veldig bra, jeg har lagt til leverandørprefiksene og kan ikke få det til å kjøre på mobiler.
Jeg får akkurat det første bildet forfra, har noen opplevd det samme?
Hvordan kunne jeg fikse det, det fungerer på mobilstørrelser på chrome devTools, men ikke på ekte mobile enheter.
Takk for alle innspill
Jörg Marzinzick
bra arbeid, men det fungerer ikke i IE10+, her er en løsning:http://www.joer-marzinzick.de
Karan Sharma
Hei, jeg bruker samme css for jquery-koden min, men når jeg berører/sveiper kuben for å rotere den, beveger den seg fint til venstre side, men når du berører venstre side for å flytte den til fronten roterer den mot klokken for å gå tilbake til forsiden og viser baksiden og høyre lysbilde som jeg ikke vil ha. Den skal bevege seg bakover med klokken. Kan noen hjelpe meg med dette
red
Hvordan kan jeg konvertere hele kuben til bilde?
Mary
hei!
Denne skal jeg prøve ut også. Jeg la nettopp en på siden min i dag, litt annen kode, men nå ser det ut til at bare i FF kuben pauser en veldig kort stund etter hver rute, også på denne demoen. Jeg har ikke sett den trege oppførselen før, hva kan det være? I Safari, krom er det helt greit!
I IE10 og 11 bare en roterende flat firkant...hmmmm
Huelfe
Hei Dave!
Dette eksemplet fungerer utmerket bortsett fra i Safari og Chrome på iPad. Jeg vet ikke hvordan jeg får dette til å fungere på iPad. Har du en løsning på dette?
Klaas
Her er et lite skript som bruker disse CSS-egenskapene til å lage roterende sider med noe Javascript.
https://github.com/Warsaalk/Polytate
Menneskelig
Jeg vil gjøre denne koden dynamisk slik at den kan fungere med bilder (jeg har gjort endringene for å vise bildene), jeg vil vise la oss si 10 bilder og gjengi dem i kubeformatet, noen ide om hvordan kan jeg gjøre det?
Bredhet
I tilfelle noen trenger å endre med raskere (det er for den horisontale), gjøres med SCSS:
https://codepen.io/rbalet
Marc
faktisk vil kuben ikke fungere uten:
.cube div { posisjon: absolutt; bredde: 200px; høyde: 200px; bakgrunn: rgba(255,255,255,0.1); box-shadow: innfelt 0 0 30px rgba(125,125,125,0.8); skriftstørrelse: 20px; tekst-align: center; linjehøyde: 200px; farge: rgba(0,0,0,0,5); font-familie: sans-serif; tekst-transform: store bokstaver;}