Vend/speil et bilde horisontalt + vertikalt med CSS

Bilder er en viktig og underholdende applikasjonskomponent. De bidrar til applikasjonens design og gir den en vakker layout. Mange av eiendommene som CSS tilbyr er gunstige på forskjellige måter. Mer spesifikt gir den funksjoner som tillater bildejustering i alle retninger, for eksempel å snu vertikalt eller horisontalt, roterende og mer.

Denne oppskrivningen vil guide deg om hvordan du kan vende eller speile et bilde horisontalt og vertikalt med CSS.

Hvordan vippe/speil et bilde horisontalt og vertikalt med CSS?

Det er forskjellige metoder som kan brukes til å snu eller rotere bildene i CSS. Vi vil diskutere følgende:

• Metode 1: Bruke “Transform: skala ()”Eiendom
• Metode 2: Bruke “Transform: Rotate ()”Eiendom

Metode 1: Hvordan snu/speil et bilde horisontalt og vertikalt ved hjelp av “Transform: Scale ()” -egenskaper?

“Transform: skala ()”Eiendom endrer størrelsen på bildet i 2D -flyet. Skalaen () spesifiserer to koordinatverdier for x-aksen og y-aksen. Mengden av skalering som gjøres i hver retning bestemmes av koordinatene. “Transform: Scalex ()”Eiendom skalerer bildet horisontalt.

Eksempel

Legg til to bilder i HTML -filen. Den første blir holdt som original gjennom hele eksemplet. Mens den andre vil bli brukt med CSS -egenskapene:

• “”Tag brukes til å inkludere et bilde.
• “src”Attributt spesifiserer bildens URL.
• “alt”Brukes til å spesifisere teksten hvis bildet ikke lastes inn på websiden.
• “bredde”Attributt angir bildens bredde.
• “klasse”Er satt med et navn for å få tilgang til bildet i CSS.

Her er HTML -koden til scenariet som nevnt tidligere:

Opprinnelig vil websiden se slik ut:

Eksempel 1: Flipping av bildet horisontalt ved hjelp av egenskapen “Transform: Scalex ()”

I CSS, legg til "Transform: Scalex ()”Eiendom til å skalere bildet horisontalt:

.flip
Transform: Scalex (-1);

Produksjon

Eksempel 2: Flipper bildet vertikalt ved hjelp av egenskapen "Transform: Scaley ()"

For å skalere bildet vertikalt i CSS, bruk "Transform: Scaley ()”Eiendom:

Transform: Scaley (-1);

Produksjon

Metode 2: Hvordan snu/speil et bilde horisontalt og vertikalt ved hjelp av "Transform: roter ()" -egenskapen?

CSS “Transform: Rotate ()”Roterer bildet rundt det faste punktet i et 2D -plan. "Rotatex ()" -funksjonen roterer bildet på x-aksen, og "rotey ()" brukes til å rotere på y-aksen.

Eksempel 1: Flipping av bildet horisontalt ved hjelp av egenskapen “Transform: Rotatey ()”

I CSS, legg til "forvandle”Eiendom med verdien”Rotatey ()”I“Flip”Klasse for å snu bildet horisontalt på“180”Grader:

Transform: Rotatey (180deg);

Produksjon

Eksempel 2: Flipp bildet vertikalt ved hjelp av egenskapen "Transform: Rotatex ()"

Legg til CSS “forvandle”Eiendom med verdien”Rotatex ()”Å snu bildet vertikalt:

Transform: Rotatex (180deg);

Produksjon

Hvordan du kan snu/speile et bilde vertikalt eller horisontalt på sveve?

For å lære å snu et bilde vertikalt eller horisontalt på svevet, kan du prøve ut følgende trinn.

Trinn 1: Opprett en HTML -fil

Følg først de medfølgende trinnene for å opprette en HTML -fil:

• Legg til en "”Element og tilordne det en klasse”Flip-Box”.
• Inne i dette kortet, legg til en annen "" med klassen "flip-card”.
• Deretter legger du til en "”Tag med“src”,“alt”, Og“stil" attributter.

Her er HTML -koden:

Trinn 2: Stil "Flip-Box" -klasse

“.Flip-Box”Brukte til å få tilgang til beholderen med klassen“Flip-Box”:

.flip-box
Posisjon: relativ;
Bredde: 300px;
Høyde: 300px;
Margin: Auto;

Egenskapene som er nevnt i ovennevnte kodebit er beskrevet nedenfor:

• “posisjon”Eiendom med verdien”slektning”Setter elementets posisjon i henhold til den nåværende plasseringen.
• “bredde”Og“høyde”Egenskaper brukes til å angi elementets område.
• “margin”Eiendom legger til mellomrom rundt elementet.

Trinn 3: Stil "Flip-Card" -klasse

Nå, stil "flip-card”Klasse:

.flip-card
Posisjon: Absolutt;
Bredde: 100%;
Høyde: 100%;
Overgang: alle 0.5s letthet;

Beskrivelsen av de ovennevnte egenskapene er nevnt nedenfor:

• “posisjon" med "Absolutt”Verdien angir elementets plassering i forhold til det nesten plasserte elementet.
• “overgang”Eiendom justerer den langsomme bevegelsen av elementene i en spesifikk varighet.

Trinn 4: Stil “IMG” -element

“”Element er stylet med CSS“Border-Radius”Eiendom:

IMG
Border-Radius: 10px;

Her, "Border-Radius”Eiendom setter bildehjørnene som runde.

Trinn 5: Vend et bilde vertikalt på svevet

For å snu bildet på Hover, CSS “:sveve”Pseudoklasse er blitt brukt:

.Flip-Box: Hopp .flip-card
Transform: Rotatex (180deg);

Produksjon

Trinn 6: Vend et bilde horisontalt på svevet

“Transform: Rotatey ()”Eiendom kan brukes til å snu bildet horisontalt:

.Flip-Box: Hopp .flip-card
Transform: Rotatey (180deg);

Produksjon

Vi har samlet tilnærmingene til å snu/speil et bilde horisontalt og vertikalt med CSS.

Konklusjon

Å snu et bilde i HTML, CSS “forvandle”Eiendom med verdiene”skala ()”Og“rotere()”Brukes. “Scalex ()”Og“Rotatey ()”Justeres for å snu bildet horisontalt. “Scaley ()”Og“Rotatex ()”Er innstilt på å snu bildet vertikalt. For å legge til en sveveeffekt, CSS “:sveve”Pseudoklasse brukes. Dette innlegget har forklart flere prosedyrer for hvordan du kan vende et bilde horisontalt og vertikalt i CSS.