Sommerfugl

Produksjon

Gå mot neste avsnitt for å lære om å snu bakgrunnsbildet.

Hvordan vippe bakgrunnsbilder ved hjelp av CSS?

For å vende bakgrunnsbilder ved hjelp av CSS, bruk "forvandle”Eiendom med“Scalex”Og“Scaley”Transform etter tilgang til det ekstra bildet.

For å gjøre det, følg den nevnte prosedyren.

Trinn 1: Style Main Div Container
Få tilgang til hovedbeholderen ved hjelp av “id”Valg langs ID -navn som“#Main-flip”:

I henhold til ovennevnte kodebit er følgende CSS -egenskaper blitt brukt på beholderen:

• “bakgrunnsfarge”Eiendom brukes til å sette et bilde på baksiden av det definerte elementet.
• “bredde”Eiendom spesifiserer breddestørrelsen på et element.
• “høyde”Brukes til å sette elementets høyde.
• “margin”Eiendom tildeler plass på yttersiden av den definerte grensen.

Trinn 2: Bruk CSS -styling på indre beholder
Få tilgang til den indre beholderen ved hjelp av klassenavnet “.indre flip”:

Bruk deretter følgende CSS -egenskaper:

• “posisjon”Eiendom spesifiserer typen posisjonsmetode som brukes for et element
• “Tekstalign”Brukes for å stille inn justering av teksten.
• “overgang”Egenskaper tillater elementer for å endre verdiene over en bestemt animasjon og varighet.
• “Transform-stil”Brukes for å spesifisere elementene gjengitt i 3D -rom som er nestet.

Trinn 3: Bruk egenskap "Transform"
Få tilgang til hoveddivelementet med ID -navnet langs “:sveve”Valg og indre div ved hjelp av klassenavn som“.indre flip”:

Deretter:

• Bruk “forvandle”Eiendom for å sette transformasjonen og setter verdien av denne egenskapen som“Rotatey (180deg)”
• “Rotatey ()”Funksjon brukes til å rotere bildet i Y -aksen ved 180deg.

Trinn 4: Sett “Backface-Visibility”
Få tilgang til begge DIV -containere med navnet sitt som “#stupe kråke”Og“.baklengs salto”For å stille synligheten:

For å gjøre det, bruk de nevnte egenskapene:

• “Backface-synlighet”Definerer om det bakerste ansiktet til et element skal være synlig når du vender mot brukeren.
• “farge”Angir fargen for den ekstra teksten.
• “bakgrunnsfarge”Setter fargen på baksiden av det definerte elementet.

Produksjon

Det handler om å snu et bakgrunnsbilde ved hjelp av CSS.

Konklusjon

For å snu bakgrunnsbildet ved hjelp av CSS, først, legg til et bilde ved hjelp av "”Element. Bruk deretter CSS -egenskapene “overgang”Og angi verdien. Etter det, bruk "forvandle”Eiendom for å sette transformasjonen og sette verdien av denne egenskapen som“Rotatey (180deg)”, Som roterer bildet i henhold til den angitte verdien. Dette innlegget handler om å snu bakgrunnsbildet ved hjelp av CSS.