Summary  
This chapter explains how to apply 2D and 3D rotations to elements using transform functions—rotate(), rotateX(), and rotateY()—by specifying angles in degrees, radians, or turns around the x, y, and z axes.  

General domain of usage  
Web user interface animations and styling

Funktionen `rotate()` kan anvendes til at rotere elementer. Positive værdier roterer elementet med uret, mens negative værdier roterer det mod uret. Rotationsvinklen angives typisk i grader (`deg`), hvor standardværdien 0deg betyder ingen rotation. Andre acceptable enheder for rotationsvinkler er turns (`turn`) og radianer (`rad`).

### Elementakser
For at forstå, hvordan rotation fungerer, skal man kende til begrebet elementakser. Der findes tre akser:
- x-aksen er horisontal og går fra venstre mod højre;
- y-aksen er vertikal og går fra top til bund;
- z-aksen er vinkelret på skærmen og peger mod brugeren.

### Rotationsretning
Som standard roterer `rotate()`-egenskaben elementet omkring z-aksen. Det er dog også muligt at anvende rotation omkring x-aksen og y-aksen ved at bruge følgende værdier:
```css
transform: rotateX(angle);
transform: rotateY(angle);
```

### Eksempel 1
Overvej følgende eksempel, hvor der anvendes forskellige rotationsvinkler for at demonstrere rotation omkring z-aksen:

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaW5kZXguY3NzIiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxkaXYgY2xhc3M9ImNvbnRhaW5lciI+CiAgICAgIDxkaXYgY2xhc3M9ImJveCI+NDVkZWc8L2Rpdj4KICAgICAgPGRpdiBjbGFzcz0iYm94Ij4zNjBkZWc8L2Rpdj4KICAgICAgPGRpdiBjbGFzcz0iYm94Ij4tMjcwZGVnPC9kaXY+CiAgICA8L2Rpdj4KICA8L2JvZHk+CjwvaHRtbD4=

LyogVGhpcyBjaGFwdGVyIGZvY3VzICovCi5ib3g6bnRoLWNoaWxkKDEpIHsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjOThkYmM2OwogIGFuaW1hdGlvbjogcm90YXRlMSA3MDAwbXMgaW5maW5pdGUgMTAwMG1zOwp9CgouYm94Om50aC1jaGlsZCgyKSB7CiAgYmFja2dyb3VuZC1jb2xvcjogI2U2ZDcyYTsKICBhbmltYXRpb246IHJvdGF0ZTIgNzAwMG1zIGluZmluaXRlIDEwMDBtczsKfQoKLmJveDpudGgtY2hpbGQoMykgewogIGJhY2tncm91bmQtY29sb3I6ICNmMThkOWU7CiAgYW5pbWF0aW9uOiByb3RhdGUzIDcwMDBtcyBpbmZpbml0ZSAxMDAwbXM7Cn0KCkBrZXlmcmFtZXMgcm90YXRlMSB7CiAgMCUgewogICAgdHJhbnNmb3JtOiByb3RhdGUoMCk7CiAgfQoKICA1MCUgewogICAgdHJhbnNmb3JtOiByb3RhdGUoNDVkZWcpOwogIH0KCiAgMTAwJSB7CiAgICB0cmFuc2Zvcm06IHJvdGF0ZSgwKTsKICB9Cn0KCkBrZXlmcmFtZXMgcm90YXRlMiB7CiAgMCUgewogICAgdHJhbnNmb3JtOiByb3RhdGUoMCk7CiAgfQoKICA1MCUgewogICAgdHJhbnNmb3JtOiByb3RhdGUoMzYwZGVnKTsKICB9CgogIDEwMCUgewogICAgdHJhbnNmb3JtOiByb3RhdGUoMCk7CiAgfQp9CgpAa2V5ZnJhbWVzIHJvdGF0ZTMgewogIDAlIHsKICAgIHRyYW5zZm9ybTogcm90YXRlKDApOwogIH0KCiAgNTAlIHsKICAgIHRyYW5zZm9ybTogcm90YXRlKC0yNzBkZWcpOwogIH0KCiAgMTAwJSB7CiAgICB0cmFuc2Zvcm06IHJvdGF0ZSgwKTsKICB9Cn0KCi8qIE5vdCB0aGUgY3VycmVudCBmb2N1cyAqLwouY29udGFpbmVyIHsKICBkaXNwbGF5OiBmbGV4OwogIGFsaWduLWl0ZW1zOiBjZW50ZXI7CiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7Cn0KCi5ib3ggewogIGZvbnQtc2l6ZTogMjJweDsKICBjb2xvcjogIzMyNDg1MTsKICB3aWR0aDogMTUwcHg7CiAgaGVpZ2h0OiAxNTBweDsKICBkaXNwbGF5OiBmbGV4OwogIGFsaWduLWl0ZW1zOiBjZW50ZXI7CiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7CiAgYm9yZGVyLXJhZGl1czogMjBweDsKICBtYXJnaW46IDIwcHg7CiAgYm94LXNoYWRvdzogMHB4IDJweCAxcHggLTFweCByZ2JhKDAsIDAsIDAsIDAuMiksCiAgICAwcHggMXB4IDFweCAwcHggcmdiYSgwLCAwLCAwLCAwLjE0KSwgMHB4IDFweCAzcHggMHB4IHJnYmEoMCwgMCwgMCwgMC4xMik7Cn0=

### Eksempel 2
I dette eksempel undersøges rotation omkring z-aksen, x-aksen og y-aksen:

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaW5kZXguY3NzIiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxkaXYgY2xhc3M9ImNvbnRhaW5lciI+CiAgICAgIDxkaXYgY2xhc3M9ImJveCI+ei1heGlzPC9kaXY+CiAgICAgIDxkaXYgY2xhc3M9ImJveCI+eS1heGlzPC9kaXY+CiAgICAgIDxkaXYgY2xhc3M9ImJveCI+eC1heGlzPC9kaXY+CiAgICA8L2Rpdj4KICA8L2JvZHk+CjwvaHRtbD4=

LyogVGhpcyBjaGFwdGVyIGZvY3VzICovCi5ib3g6bnRoLWNoaWxkKDEpIHsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjOThkYmM2OwogIGFuaW1hdGlvbjogcm90YXRlMSA3MDAwbXMgaW5maW5pdGUgMTAwMG1zOwp9CgouYm94Om50aC1jaGlsZCgyKSB7CiAgYmFja2dyb3VuZC1jb2xvcjogI2U2ZDcyYTsKICBhbmltYXRpb246IHJvdGF0ZTIgNzAwMG1zIGluZmluaXRlIDEwMDBtczsKfQoKLmJveDpudGgtY2hpbGQoMykgewogIGJhY2tncm91bmQtY29sb3I6ICNmMThkOWU7CiAgYW5pbWF0aW9uOiByb3RhdGUzIDcwMDBtcyBpbmZpbml0ZSAxMDAwbXM7Cn0KCkBrZXlmcmFtZXMgcm90YXRlMSB7CiAgMCUgewogICAgdHJhbnNmb3JtOiByb3RhdGUoMCk7CiAgfQoKICA1MCUgewogICAgdHJhbnNmb3JtOiByb3RhdGVaKDkwZGVnKTsKICB9CgogIDEwMCUgewogICAgdHJhbnNmb3JtOiByb3RhdGUoMCk7CiAgfQp9CgpAa2V5ZnJhbWVzIHJvdGF0ZTIgewogIDAlIHsKICAgIHRyYW5zZm9ybTogcm90YXRlKDApOwogIH0KCiAgNTAlIHsKICAgIHRyYW5zZm9ybTogcm90YXRlWSg5MGRlZyk7CiAgfQoKICAxMDAlIHsKICAgIHRyYW5zZm9ybTogcm90YXRlKDApOwogIH0KfQoKQGtleWZyYW1lcyByb3RhdGUzIHsKICAwJSB7CiAgICB0cmFuc2Zvcm06IHJvdGF0ZSgwKTsKICB9CgogIDUwJSB7CiAgICB0cmFuc2Zvcm06IHJvdGF0ZVgoOTBkZWcpOwogIH0KCiAgMTAwJSB7CiAgICB0cmFuc2Zvcm06IHJvdGF0ZSgwKTsKICB9Cn0KCi8qIE5vdCB0aGUgY3VycmVudCBmb2N1cyAqLwouY29udGFpbmVyIHsKICBkaXNwbGF5OiBmbGV4OwogIGFsaWduLWl0ZW1zOiBjZW50ZXI7CiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7Cn0KCi5ib3ggewogIGZvbnQtc2l6ZTogMjJweDsKICBjb2xvcjogIzMyNDg1MTsKICB3aWR0aDogMTUwcHg7CiAgaGVpZ2h0OiAxNTBweDsKICBkaXNwbGF5OiBmbGV4OwogIGFsaWduLWl0ZW1zOiBjZW50ZXI7CiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7CiAgYm9yZGVyLXJhZGl1czogMjBweDsKICBtYXJnaW46IDIwcHg7CiAgYm94LXNoYWRvdzogMHB4IDJweCAxcHggLTFweCByZ2JhKDAsIDAsIDAsIDAuMiksCiAgICAwcHggMXB4IDFweCAwcHggcmdiYSgwLCAwLCAwLCAwLjE0KSwgMHB4IDFweCAzcHggMHB4IHJnYmEoMCwgMCwgMCwgMC4xMik7Cn0=

Hvilke enheder bruges til at angive rotationsvinklen?

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.

Rotation af Elementer i 2D og 3D

Elementakser

Rotationsretning

Eksempel 1

Eksempel 2

Awesome!

Rotation af Elementer i 2D og 3D

Elementakser

Rotationsretning

Eksempel 1

Eksempel 2