Hvordan bruke flere transformasjoner i CSS?

Bilder er avgjørende for å uttrykke informasjon og forbedre utseendet til en webside. Disse HTML-grafikken brukes til å lage iøynefallende bilder, inkludert bannerannonser, tegninger og mer. Noen ganger er det imidlertid nødvendig å rotere eller vende bilder på siden for å passe spesifikke visuelle krav for virksomheten. For dette formålet tillater CSS brukerne å bruke flere “forvandle”Egenskaper på HTML -elementer.

Denne oppskrivningen vil demonstrere:

• Hvordan legge til/ sette inn et bilde i en div?




• Hvordan bruke flere transformasjoner i CSS?

Hvordan sette inn et bilde i en div?

For å legge til/sette inn et bilde i en div, prøv den nevnte prosedyren.

Trinn 1: Lag en div container

Først må du lage en DIV -beholder ved å bruke "" stikkord. Sett deretter inn en "id”Med et bestemt navn.

Trinn 2: Lag en annen div container

Etter det, oppretter en annen div -container. Legg også til et klasseattributt i Div -taggen og spesifiser et klassenavn.

Trinn 3: Legg til bilde

Legg til et bilde ved å bruke “”Tag og legg til følgende nevnte attributt som følger:

• “src”Brukes for å legge til banen til bildet inne i elementet.
• “høyde”Eiendom brukes til å spesifisere høyden på det definerte elementet.
• “bredde”Eiendom definerer elementstørrelsen horisontalt:

Det kan observeres at bildet er lagt til vellykket i beholderen:

Gå nå mot neste avsnitt for å bruke flere transformasjoner på bilder i CSS.

Hvordan bruke flere transformasjoner i CSS?

“forvandle”Eiendom i CSS brukes til å endre den visuelle formateringsmodellens koordinatrom. I tillegg brukes den til å bruke forskjellige effekter på de valgte elementene, for eksempel rotasjon, oversettelse og skjev. Prøv ut detaljerte instruksjoner for å bruke de mange transformasjonene i CSS.

For å bruke flere transformasjoner i CSS, må brukeren prøve følgende trinn.

Trinn 1: Tilgang First Div

#img-transform
tekst-align: sentrum;

Få tilgang til den første DIV -beholderen ved hjelp av velgeren med ID -navnet “#IMG-Transform”. For å gjøre det, “Tekstalign”Eiendom brukes til å justere DIV -beholderen i henhold til den spesifikke verdien.

Trinn 2: Bruk første transformasjon

Få tilgang til den andre DIV -beholderen ved hjelp av DOT -velgeren og klassenavnet som “.første orden”. Deretter bruker du “forvandle”Eiendom til den valgte klassen:

.første orden
Transform: roter (90deg) translate (135px, 180px);

I følge den gitte kodebiten:

• “forvandle”Eiendom brukes til å bruke en 2D- eller 3D -transformasjon på et definert element. Denne egenskapen tillater brukeren for å rotere, skalere, flytte og skjule elementene.
• “rotere()”Verdien av transformasjonsegenskapen er en funksjon i CSS som roterer elementet i henhold til den angitte verdien.
• “oversette()”Metode flytter et element fra sin nåværende posisjon (i henhold til parametrene gitt for x-aksen og Y-aksen).

Produksjon

Trinn 3: Bruk andre transformasjon

Få tilgang til Second Div Container igjen og bruk følgende nevnte egenskaper oppført nedenfor:

.første orden
Bakgrunnsstørrelse: Inneholder;
Transform: roter (-150deg);
Margin: 100px;

Her:

• “bakgrunnsstørrelse”Eiendom etablerer overstyrer standardoppførselen til å flisse bildet og lar brukeren velge størrelsen på bakgrunnsbildet av et element.

• Og så "forvandle”Eiendom brukes til å transformere bildet i henhold til tilstanden.
• Neste, “margin”Tildeler rommet utenfor den definerte grensen.

Produksjon

Det handlet om å bruke flere transformasjoner i CSS.

Konklusjon

For å bruke flere transformasjoner i CSS, oppretter du først en DIV -beholder med en "”Merk og legg til en ID inne i Div -taggen. Opprett deretter en annen div -beholder og sett inn en klasse med et spesifikt navn. Etter det, Access Div og anvende “forvandle”CSS -eiendom og angi verdien”roter (90)”Grad. Gjenta deretter den samme prosedyren for å anvende den andre transformasjonen. Dette innlegget forklarte metoden for å anvende flere transformasjoner i CSS.