Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lære Introduksjon til CSS-transformasjoner | Transformasjon av Elementer med CSS
Avanserte CSS-teknikker

bookIntroduksjon til CSS-transformasjoner

Vi kan legge til bevegelse på nettsidene våre. Transformasjoner endrer et elements form og posisjon uten å påvirke resten av siden. Dermed kan vi oppnå følgende effekter:

Vi kan legge til skalering på elementene:

Vi kan legge til rotasjon på elementene:

Vi kan legge til translasjon på elementene:

Vi kan legge til skeving på elementene:

Merk

Vi oppnår alle disse effektene ved hjelp av én egenskap – transform – med ulike verdier. Det er også viktig å nevne at animation og @keyframe kun er lagt til for å vise forskjellen mellom start- og slutt-tilstand for elementet. Dette betyr ikke at transform kun brukes sammen med animasjoner. Vi vil gå gjennom alle effektene i detalj i de neste kapitlene.

Alt var klart?

Hvordan kan vi forbedre det?

Takk for tilbakemeldingene dine!

Seksjon 5. Kapittel 1

Spør AI

expand

Spør AI

ChatGPT

Spør om hva du vil, eller prøv ett av de foreslåtte spørsmålene for å starte chatten vår

Awesome!

Completion rate improved to 2.04

bookIntroduksjon til CSS-transformasjoner

Sveip for å vise menyen

Vi kan legge til bevegelse på nettsidene våre. Transformasjoner endrer et elements form og posisjon uten å påvirke resten av siden. Dermed kan vi oppnå følgende effekter:

Vi kan legge til skalering på elementene:

Vi kan legge til rotasjon på elementene:

Vi kan legge til translasjon på elementene:

Vi kan legge til skeving på elementene:

Merk

Vi oppnår alle disse effektene ved hjelp av én egenskap – transform – med ulike verdier. Det er også viktig å nevne at animation og @keyframe kun er lagt til for å vise forskjellen mellom start- og slutt-tilstand for elementet. Dette betyr ikke at transform kun brukes sammen med animasjoner. Vi vil gå gjennom alle effektene i detalj i de neste kapitlene.

Alt var klart?

Hvordan kan vi forbedre det?

Takk for tilbakemeldingene dine!

Seksjon 5. Kapittel 1
some-alt