Hvordan lage et flip -kort med CSS

På nettsteder er kortene som vipper sidene på svevet kjent som flip -kort. Et enkelt flip -kort består av en forsiden og en bakside. Du kan imidlertid bruke dette kortet til å gjøre nettstedet tiltalende og underholdende. Flip -kortet kan være et visittkort, produktkort, spillkort, servicekort eller mer.

Denne artikkelen vil demonstrere metoden for å lage et flip -kort med CSS.

Hvordan lage/lage et flip -kort ved hjelp av CSS?

Vi lager et flip -kort som inneholder et bilde på forsiden og ryggen som består av bildebeskrivelsen.

Trinn 1: Opprett en HTML -side

Først legger du til et divelement med navnet "Flip-Container”. Denne beholderen holder flip -kortet inni den. For dette:

• Legg til et DIV -element og tilordne det et klassenavn som "flip-card”.
• Deretter plasserer du to divelementer med klassenavn “Font-side”Og“baksiden”, Henholdsvis.

Som vi har diskutert ovenfor, vil forsiden vise et bilde, og baksiden vil inneholde beskrivelsen av bildet:

Baby trinn sko rosa

Nyfødt - 12 måneder. Baby Steps Girls 'Shoe har et trendy, lett, komfortable par sko med en myk såle.

La oss bruke CSS-stylingegenskaper på ovennevnte kode.

Trinn 2: Stil “Flip-Container” Div

.Flip-Container
Posisjon: relativ;
Bredde: 300px;
Høyde: 300px;
Margin: Auto;

Flip -beholderen er stylet med følgende CSS -egenskaper:

• “posisjon”Eiendom brukes til innstilling av elementets posisjon. Verdien "slektning”Plasserer elementet i forhold til dens normale stilling.
• “høyde”Eiendom definerer høyden på det valgte HTML -elementet.
• “bredde”Eiendom betyr bredden.
• “marginEiendoms verdi indikerer plassen rundt det ekstra elementet.

Trinn 3: Stil “Flip-Card” Div

.flip-card
Posisjon: Absolutt;
Bredde: 100%;
Høyde: 100%;
Transform-stil: Preserve-3D;
Overgang: alle 0.5s letthet;

“flip-card”DIV -elementet er stylet ved hjelp av følgende CSS -egenskaper:

• “posisjon”Eiendom med verdien”Absolutt”Plasserer elementet i forhold til det plasserte overordnede elementet.
• “Transform-stil”Eiendom brukes til å sette plassen til sine barnelementer flat eller 3D. Verdien "Preserve-3D”Angir 3D -rommet til barna.
• “overgang”Eiendom med verdien”alle 0.5s letthet”Indikerer at“alle”Egenskaper brukes med overgangsvarigheten til“0.5s”. Verdien "letthet”Angir overgangseffekten for å starte som treg, deretter raskt, og bevege deg deretter tilbake til sakte.

Trinn 4: Stil “Front-side” og “Back-side” DIV-elementer

.forsiden,
.baksiden
Posisjon: Absolutt;
Bredde: 100%;
Høyde: 100%;
Backface-synlighet: skjult;

For å skjule bakoverflaten til “baksiden”Div så vel som“forsiden”Div Element, bruk“Backface-synlighet”Med verdien”skjult”.

Trinn 5: Stil “back-side” div

.baksiden
Bakgrunn: Darkcyan;
Farge: #FFF;
Border-Radius: 5px;
tekst-align: sentrum;
Font-størrelse: 25px;
Transform: Rotatey (180deg);

“baksiden”Div Element har følgende CSS -egenskaper:

• “bakgrunn”Eiendom setter elementets bakgrunnsfarge.
• “farge”Eiendom setter elementets fontfarge.
• “Border-Radius”Eiendom gjør elementets kanter rundt.
• “skriftstørrelse”Eiendom brukes til å spesifisere elementets skriftstørrelse.
• “TekstalignEiendoms verdi representerer justeringsstilen til den ekstra teksten.

Så baksiden av kortet vil se slik ut:

Når vi svever over kortbeholderen, vil vi at kortet skal rotere med 180 grader, avsløre baksiden og skjule forsiden. Så la oss rotere baksiden ved å bruke CSS “forvandle”Eiendom.

• “forvandle”Eiendom brukes til å sette elementets transformasjon rundt ordinatene. Verdien "Rotatey (180deg)”Vil rotere elementet 180 grader rundt y-aksen.

Her er flip -kortet vårt:

Til slutt, ta turen over for å legge hoverseffekten til kortet.

Trinn 6: Style “Flip-Card” Div on Hover

.Flip-Container: Hover .flip-card
Transform: Rotatey (180deg);

“.Flip-Container: Hover”Henviser til sveveeffekten på flip-container. Når musen svever over “Flip-Container”Div,“flip-card”Div vil også rotere med 180 grader. For å gjøre dette, CSS “forvandle”Eiendom med verdien”Rotatey (180deg)”Brukes.

Så her er det endelige resultatet:

Det handlet om å lage et flip -kort med CSS.

Konklusjon

Flip -kortet er den vanlige dekorative komponenten som brukes i enhver webapplikasjon. Dette kortet inneholder sider foran og bak. På svevet vipper den og endrer kontinuerlig sidene. Denne flip -effekten blir lagt til den ved å bruke "forvandle”Eiendom med verdien”Rotatey ()”Funksjon. Dette innlegget har vist prosedyren for å lage et flip -kort med CSS.