Summary  
This chapter explains how to use CSS transform scale functions—scale(), scaleX(), and scaleY()—to resize elements horizontally, vertically, or both by applying unitless scaling factors.  

General domain of usage  
Front-end web development

`scale()` lar oss øke eller redusere størrelsen på et element. Vi kan også endre størrelsen på et element kun vertikalt ved å bruke `scaleY()`-egenskapen, eller kun horisontalt ved å bruke `scaleX()`-egenskapen.
```css
transform: scale(X-value, Y-value);
transform: scaleX(value);
transform: scaleY(value);
```
Verdiene for `scale`-funksjonene må være uten enhet. Som standard er verdien `1`, som betyr ingen endring.
- `scale()`-funksjonen kan ta to verdier. Den første (`X-value`) er tallet som representerer horisontal skalering. Den andre (`Y-value`) er tallet som representerer vertikal skalering. Hvis vi angir én verdi, bruker nettleseren den samme for både horisontal og vertikal skalering;
- `scaleX`- og `scaleY`-funksjonene tar én verdi og endrer et element horisontalt og vertikalt, henholdsvis.


La oss øve og legge til skalering for følgende elementer:

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaW5kZXguY3NzIiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxkaXYgY2xhc3M9ImNvbnRhaW5lciI+CiAgICAgIDxkaXYgY2xhc3M9ImJveCI+c2NhbGUoMS41LCAxLjUpPC9kaXY+CiAgICAgIDxkaXYgY2xhc3M9ImJveCI+c2NhbGVYKDAuMik8L2Rpdj4KICAgICAgPGRpdiBjbGFzcz0iYm94Ij5zY2FsZVkoMS41KTwvZGl2PgogICAgPC9kaXY+CiAgPC9ib2R5Pgo8L2h0bWw+

LyogVGhpcyBjaGFwdGVyIGZvY3VzICovCi5ib3g6bnRoLWNoaWxkKDEpIHsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjOThkYmM2OwogIGFuaW1hdGlvbjogc2NhbGUxIDcwMDBtcyBpbmZpbml0ZSAxMDAwbXM7Cn0KCi5ib3g6bnRoLWNoaWxkKDIpIHsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjZTZkNzJhOwogIGFuaW1hdGlvbjogc2NhbGUyIDcwMDBtcyBpbmZpbml0ZSAxMDAwbXM7Cn0KCi5ib3g6bnRoLWNoaWxkKDMpIHsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjZjE4ZDllOwogIGFuaW1hdGlvbjogc2NhbGUzIDcwMDBtcyBpbmZpbml0ZSAxMDAwbXM7Cn0KCkBrZXlmcmFtZXMgc2NhbGUxIHsKICAwJSB7CiAgICB0cmFuc2Zvcm06IHNjYWxlKDEpOwogIH0KCiAgNTAlIHsKICAgIHRyYW5zZm9ybTogc2NhbGUoMS41LCAxLjUpOwogIH0KCiAgMTAwJSB7CiAgICB0cmFuc2Zvcm06IHNjYWxlKDEpOwogIH0KfQoKQGtleWZyYW1lcyBzY2FsZTIgewogIDAlIHsKICAgIHRyYW5zZm9ybTogc2NhbGVYKDEpOwogIH0KCiAgNTAlIHsKICAgIHRyYW5zZm9ybTogc2NhbGVYKDAuMik7CiAgfQoKICAxMDAlIHsKICAgIHRyYW5zZm9ybTogc2NhbGVYKDEpOwogIH0KfQoKQGtleWZyYW1lcyBzY2FsZTMgewogIDAlIHsKICAgIHRyYW5zZm9ybTogc2NhbGVZKDEpOwogIH0KCiAgNTAlIHsKICAgIHRyYW5zZm9ybTogc2NhbGVZKDEuNSk7CiAgfQoKICAxMDAlIHsKICAgIHRyYW5zZm9ybTogc2NhbGVZKDEpOwogIH0KfQoKLyogTm90IHRoZSBjdXJyZW50IGZvY3VzICovCi5jb250YWluZXIgewogIHBhZGRpbmc6IDEwcHg7CiAgZGlzcGxheTogZmxleDsKICBhbGlnbi1pdGVtczogY2VudGVyOwogIGp1c3RpZnktY29udGVudDogY2VudGVyOwp9CgouYm94IHsKICBmb250LXNpemU6IDIwcHg7CiAgY29sb3I6ICMzMjQ4NTE7CiAgd2lkdGg6IDE1MHB4OwogIGhlaWdodDogMTUwcHg7CiAgZGlzcGxheTogZmxleDsKICBhbGlnbi1pdGVtczogY2VudGVyOwogIGp1c3RpZnktY29udGVudDogY2VudGVyOwogIGJvcmRlci1yYWRpdXM6IDIwcHg7CiAgbWFyZ2luOiAyMHB4OwogIGJveC1zaGFkb3c6IDBweCAycHggMXB4IC0xcHggcmdiYSgwLCAwLCAwLCAwLjIpLAogICAgMHB4IDFweCAxcHggMHB4IHJnYmEoMCwgMCwgMCwgMC4xNCksIDBweCAxcHggM3B4IDBweCByZ2JhKDAsIDAsIDAsIDAuMTIpOwp9

Hvilke av følgende alternativer kan brukes for å skalere et element kun i horisontal retning?

Forbedre 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 lær å effektivisere 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.

Skalering av Elementer

Awesome!

Skalering av Elementer