CSS bakgrunnsbilde flip
I denne guiden vil vi gjøre alle disse flippeteknikkene ved å bruke CSS -egenskapene. Her vil vi lære om bildeflippen i CSS ved å bruke forskjellige egenskaper.
Eksempel nr. 1:
For å snu bildet i CSS, må vi ha HTML -koden der vi legger til bildet. Deretter oppretter vi en CSS -fil for å bruke egenskapene slik at bildet vårt vipper. Vi kan snu vårt image i alle retninger etter vårt valg. Vi har den visuelle studiokoden der vi må utføre disse eksemplene. Så vi åpner filen og velger språket som "HTML" og oppretter denne HTML -filen. Deretter må vi gjøre noen kode her som er gitt i følgende bilde. Når vi fullfører denne koden, må vi lagre den.
For å vise overskriften på toppen av siden, legger vi til “
" stikkord. Så har vi et avsnitt, og dette avsnittet vises ved siden av overskriften. Etter dette gjør vi hovedkoden som legger til bildekoden. Vi legger til bildet etter overskriften og avsnittet. Vi bruker "" -merket og i "SRC". Vi gir banen eller navnet på bildet som vi vil legge til. Vi setter breddeverdien til "400" og høyden til "300". Vi setter også denne bredden og høyden i CSS -filen vår. Nå flytter vi for å lage vår CSS -fil der vi bruker de forskjellige egenskapene for å gjøre bildet vårt til et flippbilde.
Vi bruker bildet "Hover" -velgeren. Det brukes til å velge bildet når markøren beveger seg over bildet. "Webkit-Transform" er CSS-egenskapen som brukes til å transformere bildet til 2-D og 3-D. Vi kan rotere bildet vårt ved å bruke dette. "Scalex" brukes til å rotere bildet i horisontalt retning. Denne koden vil rotere bildet horisontalt når vi flytter markøren over dette bildet.
Dette er det originale bildet før du flytter markøren over bildet. Når vi svever over dette bildet, roterer det i horisontalt retning.
Det roterte bildet er også vist på følgende:
Her kan du se at bildet roterer horisontalt. Det forrige bildet er det roterte bildet etter å ha flyttet markøren over bildet.
Eksempel 2:
Dette er HTML -filen. Du kan se at vi la til et bilde her i denne koden. Vi brukte “huset.PNG ”-bilde i dette eksemplet.
Vi setter bildet "bredde" til "500px" og bildet "høyde" til "400px". Etter dette har vi et bilde "svev" som "transformerer" bildet på den horisontale aksen når markøren henger over dette bildet.
Produksjon:
Det forrige bildet er det originale bildet før transformasjonen på den horisontale aksen. Følgende bilde er bildet etter transformasjonen når vi flytter markøren over bildet. Du kan enkelt se forskjellen mellom det forrige bildet og følgende gitt bilde.
Eksempel nr. 3:
Her er verdiene “bredde” og “høyde” de samme, og bildet er det samme. Men vi roterer bildet vertikalt etter å ha svevet over bildet. Så vi bruker "transformasjonen" og setter den til "Scaley (-1)" slik at det vil rotere bildet vårt i vertikal retning.
Se nå at bildet roterer i vertikal retning når vi svever over dette bildet. Her vises bildet i en opp ned retning som roterer vertikalt etter å ha svever over dette.
Eksempel 4:
I denne koden bruker vi de to verdiene i "skalaen". Vi bruker “Transform”. I sin "skala" passerer vi de to verdiene “-1, -1” som roterer bildet i de vertikale og horisontale retningene. Når vi beveger musen på dette bildet, roterer den i begge retninger.
Se at bildet roteres både på den vertikale og horisontale aksen når vi svever over det. Det forrige bildet er bildet etter å ha svevet over det originale bildet.
Eksempel 5:
Dette eksemplet er forskjellig fra de tidligere eksemplene. Vi oppretter de forskjellige divklassene ved hjelp av de forskjellige navnene. First Div-klassen heter “Flip-Box”. Den andre Div-klassen er navn "Flip-Box-Inner". Og den tredje div-klassen heter “Flip-Box-Front”. Etter å ha definert alle disse DIV -klassene, la vi et bilde som heter “MyImage.JPEG ”. Vi oppretter deretter et annet "div" med et "flip-box-back" -navn. Nå skriver vi noen avsnitt i denne diven. Vi bruker alle disse DIV -klassene i CSS -filen vår.
Vi bruker "kroppen" og "font-family" til "Arial". Deretter setter vi "Flip Box" -beholderens bredde og høyde til henholdsvis "600px" og "400px". Nå legger vi til "grensen" og setter den til "1px" i bredden med en "solid" type slik at vi kan vise at når dette bildet vipper, går det ut av boksen når vi flytter markøren over den. Vi legger til "perspektivet" og setter det til "1000px". Vi bruker den når vi må legge til litt tredimensjonal effekt på bildet.
Nå har vi en annen beholder som er en "flip-box-inner". Denne beholderen setter posisjonen til fronten og baksiden av bildet. Vi setter "posisjonen" til "relativ", og "bredden" og "høyden" til "100px". Vi bruker "overgang" -egenskapen for å kontrollere animasjonshastigheten og sette den til “0.8s ”.
Etter dette bruker vi "transform-stil" for å gjengi bildet i det tredimensjonale rommet. Vi satte den til “Preserve-3D”. Deretter har vi en "flip-box" -hiver, så når vi svever over bildet, vil den bevege seg i horisontal retning siden vi bruker "transformasjonen" for å "rotere" og sette den til "180deg". Vi har "flip-box-front" og "flip-box-back". Deretter gir vi posisjonen til begge her. Vi setter "posisjonen" for begge til "absolutt". "Høyden" og "bredden" for begge beholderne er satt til henholdsvis "100px" og "100px". Vi setter også "Webkit-Backface-Visibility" til "Skjult". Denne egenskapen brukes når vi roterer bildet og angir det her om brukeren vil se bakoverflaten på bildet eller ikke.
Så her skjuler vi det ved å bruke den "skjulte" -koden med denne eiendommen. Nå styler vi forsiden ved å bruke en "flip-box-front" -beholder. Vi setter "bakgrunnsfargen" til "#BBB" og "fargen" på skriften eller teksten til "svart". Til slutt styler vi baksiden av bildet ved å bruke "flip-box-back". Den "bakgrunnsfargen" er satt til "grå", og skrifttypen "farge" er satt til "hvit". Vi bruker egenskapen "Transform" og setter verdien til "Rotatey (180deg)".
I utgangen har vi flere bilder der du kan legge merke til rotasjonen av bildet. I det siste bildet vises også baksiden av bildet her. Du kan se hvordan det roterer når vi svever over dette bildet. All teksten som vi har skrevet i HTML -koden vises på baksiden av bildet når dette bildet roterer etter sveving.
Konklusjon
I denne guiden brukte vi Image Flip -konseptet i CSS. Vi utførte de forskjellige kryssende eksemplene her. Vi snudde bildet vårt i vertikal retning eller horisontale retning eller i begge retninger etter å ha svevde. Vi utførte også ett eksempel der vi roterer bildet vårt på 180 grader når vi svever over bildet. Vi brukte CSS -egenskapene i alle eksemplene og ga alle utgangene i denne guiden. Du vil se hvordan bildet vipper eller roterer vertikalt og horisontalt.