Summary  
This chapter introduces the CSS transform property to modify an element’s shape and position—enabling scaling, rotation, translation, and skewing—without impacting other page elements.

General domain of usage  
Web interface animations

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:

> 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.

Hev dine ferdigheter innen styling ved å mestre avanserte CSS-teknikker for moderne webdesign. Plasser og håndter elementer med presisjon ved hjelp av avanserte posisjoneringsstrategier. Lag jevne overganger og engasjerende animasjoner for å forbedre brukeropplevelsen. Transformer og manipuler elementer for dynamiske visuelle effekter. Bygg responsive design som tilpasser seg ulike enheter, og effektiviser arbeidsflyten med CSS-preprosessorer som Sass.

Undersøk hva deltakerne kan forvente av dette kurset i avansert HTML og CSS-styling. Hvilke forkunnskaper kreves før du starter kurset? Hvilke emner vil bli dekket?

Posisjonering og håndtering av elementer på nettsider. Lær om ulike posisjonerings-egenskaper, oppdag hvordan du bruker stablingsrekkefølge for å kontrollere synligheten til overlappende elementer, og håndter til slutt innhold som flyter utenfor.

Utforsk kraften i overganger og lær hvordan du kan forbedre brukeropplevelsen. Oppdag hvordan egenskaper kan animeres jevnt og gradvis for å skape sømløse tilstandsendringer.

Lær om animasjonsegenskapen og hvordan den kan brukes til å skape dynamiske og engasjerende design. Oppdag hvordan du kan lage komplekse animasjoner ved hjelp av nøkkelbilder og hvordan du kan kontrollere animasjonen.

Utforsk transformasjonsegenskapen, som gjør det mulig å endre utseendet og posisjonen til elementer på en nettside. Lær hvordan du kan skalere, rotere, skjevstille og flytte elementer i to og tre dimensjoner. Kombiner flere transformasjoner for å skape mer komplekse effekter.

Prinsippene og teknikkene som brukes i adaptivt og responsivt design har som mål å gjøre nettsteder og applikasjoner tilgjengelige og visuelt tiltalende på tvers av ulike enheter, skjermstørrelser og orienteringer.

Lær om forprosessorer i CSS og hvordan de kan bidra til å skrive mer effektiv og vedlikeholdbar kode. Forstå hvordan forprosessorer kan forenkle arbeidsflyten og generere renere CSS-kode.

Introduksjon til CSS-transformasjoner

Awesome!

Introduksjon til CSS-transformasjoner