Roter et bilde i bildekilde i HTML

Bilder er en viktig del av nettsteder som formidler litt informasjon og gjør websider mer attraktive. Dessuten kan brukere legge til flere typer bilder, inkludert produktbilder, bildeglidebrytere og illustratører. Videre kan du bruke forskjellige effekter på dem, for eksempel å bla eller rotere. Disse funksjonalitetene blir spesielt brukt på eksemplene som er til stede i fotoredigering av webapper.

Dette innlegget vil forklare:

• Metode 1: Hvordan rotere et bilde i bildekilde i HTML?
• Metode 2: Hvordan rotere et bilde i HTML ved å bruke CSS -egenskaper?

Metode 1: Hvordan rotere et bilde i bildekilde i HTML?

For å rotere et bilde i bildekilden i HTML, bruk den inline CSS direkte i bildekilden ved hjelp av oppgitte instruksjoner.

Trinn 1: Lag en "div" -beholder
Først av alt, lage en “div”Container ved hjelp av“”Merk og tilordne den en“klasse”Attributt med et spesifikt navn.

Trinn 2: Legg til bilde
Deretter legger du til et bilde ved å bruke "”Tag sammen med“src" Egenskap. Tildel deretter bildens navn eller bilde -URL som en "src”Verdi:

Den resulterende utgangen viser at bildet er lagt til vellykket:

Trinn 3: Drei bildet
Neste, for å rotere bildet i en bildekilde, bruk inline CSS ved hjelp av "stil”Attributt sammen med CSS -eiendommen”Transform: Rotate (30deg)”. “forvandle”Brukes til å bruke transformasjonen på det definerte elementet. Det er fire mulige verdier for transformasjon: “rotere”,“skala”,“bevege seg”, Og“skjev”. Mer spesifikt, “rotere()”Funksjon brukes til å rotere bildet rundt et 2D -plan:

Produksjon

Trinn 3: Bruk styling på bildekilde ved hjelp av CSS
Brukere kan også bruke de andre CSS -egenskapene på bildekilden i henhold til deres behov. For dette formålet, først, få tilgang til “.kilde-img”Klasse og bruk CSS -egenskapene som følger:

.kilde-img
Bredde: 100px;
Høyde: 250px;
Margin: 100px;

Her:

• “Bredde” brukes til å sette bredden på elementet.
• "Høyde" -egenskapen tildeler en spesifikk høyde til et element.
• “Margin” brukes til å stille inn det tomme rommet rundt elementet.

Produksjon

Metode 2: Hvordan rotere et bilde i HTML ved å bruke CSS -egenskaper?

Brukere kan også rotere bildet ved hjelp av innebygd CSS. Flere egenskaper kan brukes til dette formålet, for eksempel “rotere”Eiendom og“forvandle”Eiendom.

Følg de medfølgende eksemplene for å rotere bildet ved hjelp av CSS:

• Eksempel 1: Roter bildet ved hjelp av "roter" egenskapen
• Eksempel 2: Rotate Image ved hjelp av "Transform" -egenskapen

Eksempel 1: Roter bildet ved hjelp av "roter" egenskapen
“rotere”CSS -eiendom brukes til å rotere elementet med klokken rundt 2D -planet. For å bruke denne egenskapen for å rotere bildet, sjekk ut de gitte trinnene.

Trinn 1: Lag en "div" -beholder
Lag en "div" -beholder ved å bruke "”Merk og sett inn et klasseattributt med et spesifikt navn.

Trinn 2: Legg til et bilde
Legg deretter til et bilde ved hjelp av "”Tag sammen med“src”Og“alt" attributter. “Alt” -attributtet brukes til å angi alternativ tekst for bildet:

Produksjon

Trinn 3: Bruk "Rotate" -egenskapen
Få tilgang til klassen ved å bruke klasselektoren og navnet ".rotere”. Deretter bruker du “margin" og "rotere”Eiendom på den. For eksempel verdien av "rotere”Er satt som“45deg”:

.rotere
Margin: 100px 50px;
roter: 45deg;

Utgangen indikerer at bildet roteres med suksess ved å bruke "rotere" Egenskap:

Eksempel 2: Rotate Image ved hjelp av "Transform" -egenskapen
Få tilgang til klassen ved å bruke ".rotere”. Deretter bruker du “margin”Og“forvandle" egenskaper:

.rotere
Margin: 100px 50px;
Transform: roter (320deg);

Her, "forvandle”Eiendom brukes til å transformere bildet. I vårt scenario er verdien satt som "roter (320deg)”. Hvor "rotere()”Er en funksjon som brukes til å rotere elementet:

Ovennevnte utgang viser at bildet roteres på den spesifiserte vinkelen rundt 2D -planet.

Konklusjon

For å rotere bildet i bildekilden i HTML, kan brukere bruke "stil”Attributt og angi verdien som“Transform: Rotate ()”. Videre kan du også bruke den innebygde CSS for å rotere bildet i bildekilden ved hjelp av "rotere" egenskaper. Denne artikkelen har uttalt prosedyrene relatert til å rotere bildet i bildekilden i HTML.