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()` giver os mulighed for at forstørre eller formindske elementets størrelse. Vi kan også ændre størrelsen på et element kun vertikalt ved at bruge `scaleY()`-egenskaben eller kun horisontalt ved at bruge `scaleX()`-egenskaben.
```css
transform: scale(X-value, Y-value);
transform: scaleX(value);
transform: scaleY(value);
```
Værdierne for `scale`-funktionerne skal være uden enheder. Som standard er værdien `1`, hvilket betyder, at der ikke foretages ændringer.
- `scale()`-funktionen kan modtage to værdier. Den første (`X-value`) er tallet, der repræsenterer den horisontale skalering. Den anden (`Y-value`) er tallet, der repræsenterer den vertikale skalering. Hvis vi angiver én værdi, anvender browseren den samme for både horisontal og vertikal skalering;
- `scaleX`- og `scaleY`-funktionerne modtager én værdi og ændrer et element henholdsvis horisontalt og vertikalt.


Lad os øve os og tilføje skalering til følgende elementer:

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

LyogVGhpcyBjaGFwdGVyIGZvY3VzICovCi5ib3g6bnRoLWNoaWxkKDEpIHsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjOThkYmM2OwogIGFuaW1hdGlvbjogc2NhbGUxIDcwMDBtcyBpbmZpbml0ZSAxMDAwbXM7Cn0KCi5ib3g6bnRoLWNoaWxkKDIpIHsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjZTZkNzJhOwogIGFuaW1hdGlvbjogc2NhbGUyIDcwMDBtcyBpbmZpbml0ZSAxMDAwbXM7Cn0KCi5ib3g6bnRoLWNoaWxkKDMpIHsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjZjE4ZDllOwogIGFuaW1hdGlvbjogc2NhbGUzIDcwMDBtcyBpbmZpbml0ZSAxMDAwbXM7Cn0KCkBrZXlmcmFtZXMgc2NhbGUxIHsKICAwJSB7CiAgICB0cmFuc2Zvcm06IHNjYWxlKDEpOwogIH0KCiAgNTAlIHsKICAgIHRyYW5zZm9ybTogc2NhbGUoMS41LCAxLjUpOwogIH0KCiAgMTAwJSB7CiAgICB0cmFuc2Zvcm06IHNjYWxlKDEpOwogIH0KfQoKQGtleWZyYW1lcyBzY2FsZTIgewogIDAlIHsKICAgIHRyYW5zZm9ybTogc2NhbGVYKDEpOwogIH0KCiAgNTAlIHsKICAgIHRyYW5zZm9ybTogc2NhbGVYKDAuMik7CiAgfQoKICAxMDAlIHsKICAgIHRyYW5zZm9ybTogc2NhbGVYKDEpOwogIH0KfQoKQGtleWZyYW1lcyBzY2FsZTMgewogIDAlIHsKICAgIHRyYW5zZm9ybTogc2NhbGVZKDEpOwogIH0KCiAgNTAlIHsKICAgIHRyYW5zZm9ybTogc2NhbGVZKDEuNSk7CiAgfQoKICAxMDAlIHsKICAgIHRyYW5zZm9ybTogc2NhbGVZKDEpOwogIH0KfQoKLyogTm90IHRoZSBjdXJyZW50IGZvY3VzICovCi5jb250YWluZXIgewogIHBhZGRpbmc6IDEwcHg7CiAgZGlzcGxheTogZmxleDsKICBhbGlnbi1pdGVtczogY2VudGVyOwogIGp1c3RpZnktY29udGVudDogY2VudGVyOwp9CgouYm94IHsKICBmb250LXNpemU6IDIwcHg7CiAgY29sb3I6ICMzMjQ4NTE7CiAgd2lkdGg6IDE1MHB4OwogIGhlaWdodDogMTUwcHg7CiAgZGlzcGxheTogZmxleDsKICBhbGlnbi1pdGVtczogY2VudGVyOwogIGp1c3RpZnktY29udGVudDogY2VudGVyOwogIGJvcmRlci1yYWRpdXM6IDIwcHg7CiAgbWFyZ2luOiAyMHB4OwogIGJveC1zaGFkb3c6IDBweCAycHggMXB4IC0xcHggcmdiYSgwLCAwLCAwLCAwLjIpLAogICAgMHB4IDFweCAxcHggMHB4IHJnYmEoMCwgMCwgMCwgMC4xNCksIDBweCAxcHggM3B4IDBweCByZ2JhKDAsIDAsIDAsIDAuMTIpOwp9

Hvilke af følgende muligheder kan bruges til kun at skalere et element i den vandrette retning?

Opgradér dine stylingfærdigheder ved at mestre avancerede CSS-teknikker til moderne webdesign. Positionér og håndter elementer med præcision ved hjælp af avancerede positioneringsstrategier. Skab glidende overgange og engagerende animationer for at forbedre brugeroplevelsen. Transformér og manipuler elementer for dynamiske visuelle effekter. Byg responsive designs, der tilpasser sig på tværs af enheder, og lær at effektivisere din arbejdsgang med CSS preprocessorer som Sass.

Undersøg, hvad deltagerne kan forvente af dette kursus i avanceret HTML og CSS-styling. Hvilke forudsætninger kræves, før du starter kurset? Hvilke emner vil blive dækket?

Placering og håndtering af elementer på websider. Lær om de forskellige positioneringsegenskaber, opdag hvordan stablingsrækkefølgen bruges til at kontrollere synligheden af overlappende elementer, og håndter til sidst indholds-overløb.

Undersøg styrken ved overgange og lær, hvordan brugeroplevelsen kan forbedres. Opdag, hvordan egenskaber kan animeres glidende og gradvist for at skabe sømløse tilstandsskift.

Lær om animation-egenskaben, og hvordan den kan bruges til at skabe dynamiske og engagerende designs. Opdag, hvordan man opretter komplekse animationer ved hjælp af keyframes, og hvordan man styrer animationen.

Undersøg transform-egenskaben, som muliggør ændring af udseende og placering af elementer på en webside. Lær hvordan man skalerer, roterer, skæver og flytter elementer i to og tre dimensioner. Kombinér flere transformationer for at skabe mere komplekse effekter.

Principperne og teknikkerne, der anvendes i adaptivt/responsivt design, har til formål at gøre websites og applikationer tilgængelige og visuelt tiltalende på tværs af forskellige enheder, skærmstørrelser og orienteringer.

Lær om præprocessorer i CSS, og hvordan de kan hjælpe med at skrive mere effektiv og vedligeholdelsesvenlig kode. Forstå, hvordan præprocessorer kan forenkle arbejdsgangen og generere mere overskuelig CSS-kode.

Skalering af Elementer

Awesome!

Skalering af Elementer