## Taak
Maak een interactieve informatiekaart over dieren. Volg deze stappen om dynamische effecten toe te voegen bij hover:
1. Pas een `perspective` van `400px` toe op het ouder-element, een `div` met de classnaam `container`.
2. Gebruik de `translateZ()`-functie om de kaart (`div` met de classnaam `card`) `50px` dichter bij de gebruiker te brengen.
3. Voeg een skew toe langs de x-as van `10deg` aan de kaartbeschrijving (`div` met de classnaam `card-description-wrapper`).

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaW5kZXguY3NzIiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxkaXYgY2xhc3M9ImNvbnRhaW5lciI+CiAgICAgIDxkaXYgY2xhc3M9ImNhcmQiPgogICAgICAgIDxpbWcKICAgICAgICAgIHNyYz0iaHR0cHM6Ly9jb2RlZmluaXR5LWNvbnRlbnQtbWVkaWEuczMuZXUtd2VzdC0xLmFtYXpvbmF3cy5jb20vY29kZS0xL2FkdmFuY2VkK2Nzcyt0ZWNobmlxdWVzL3RyYW5zZm9ybWF0aW9ucytzZWN0aW9uL2hpcHBvLWNoYWxsZW5nZStpbWFnZS5wbmciCiAgICAgICAgICBhbHQ9ImhpcHBvIgogICAgICAgICAgd2lkdGg9IjEwMHB4IgogICAgICAgIC8+CiAgICAgICAgPGRpdiBjbGFzcz0iY2FyZC1kZXNjcmlwdGlvbi13cmFwcGVyIj4KICAgICAgICAgIDxoMyBjbGFzcz0iY2FyZC10aXRsZSI+SGlwcG88L2gzPgogICAgICAgICAgPHAgY2xhc3M9ImNhcmQtdGV4dCI+CiAgICAgICAgICAgIExhcmdlIHNlbWktYXF1YXRpYyBtYW1tYWwgd2l0aCB0aGljayBza2luLCBtYXNzaXZlIGphd3MsIGFuZCBzaG9ydAogICAgICAgICAgICBsZWdzLCBmb3VuZCBpbiBzdWItU2FoYXJhbiBBZnJpY2EuCiAgICAgICAgICA8L3A+CiAgICAgICAgPC9kaXY+CiAgICAgIDwvZGl2PgogICAgPC9kaXY+CiAgPC9ib2R5Pgo8L2h0bWw+

OnJvb3QgewogIC0tdGltZTogNDAwMG1zOwogIC0tdGltZS1mdW5jdGlvbjogY3ViaWMtYmV6aWVyKDAuMTY1LCAwLjg0LCAwLjQ0LCAxKTsKfQoKLmNvbnRhaW5lciB7CiAgYm94LXNoYWRvdzogMHB4IDBweCA1cHggcmdiYSgwLCAwLCAwLCAwLjUpOwogIHBhZGRpbmc6IDIwcHg7CiAgYm9yZGVyLXJhZGl1czogMTBweDsKCiAgLyogLS0tLS0tLS0tLS0tLS0tIE1ha2UgY2hhbmdlcyBiZWxvdyB0aGlzIGxpbmUgLS0tLS0tLS0tLS0tLS0tICovCiAgX19fOiBfX187CiAgLyogLS0tLS0tLS0tLS0tLS0tIE1ha2UgY2hhbmdlcyBhYm92ZSB0aGlzIGxpbmUgLS0tLS0tLS0tLS0tLS0tICovCn0KCi5jYXJkOmhvdmVyIHsKICAvKiAtLS0tLS0tLS0tLS0tLS0gTWFrZSBjaGFuZ2VzIGJlbG93IHRoaXMgbGluZSAtLS0tLS0tLS0tLS0tLS0gKi8KICBfX186IF9fXzsKICAvKiAtLS0tLS0tLS0tLS0tLS0gTWFrZSBjaGFuZ2VzIGFib3ZlIHRoaXMgbGluZSAtLS0tLS0tLS0tLS0tLS0gKi8KfQoKLmNhcmQ6aG92ZXIgLmNhcmQtZGVzY3JpcHRpb24td3JhcHBlciB7CiAgYm94LXNoYWRvdzogMHB4IDBweCAxMHB4IHJnYmEoMCwgMCwgMCwgMC41KTsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjZjZmMWYxOwoKICAvKiAtLS0tLS0tLS0tLS0tLS0gTWFrZSBjaGFuZ2VzIGJlbG93IHRoaXMgbGluZSAtLS0tLS0tLS0tLS0tLS0gKi8KICBfX186IF9fXzsKICAvKiAtLS0tLS0tLS0tLS0tLS0gTWFrZSBjaGFuZ2VzIGFib3ZlIHRoaXMgbGluZSAtLS0tLS0tLS0tLS0tLS0gKi8KfQoKLyogTm90IHRoZSBjdXJyZW50IGZvY3VzICovCiogewogIGJveC1zaXppbmc6IGJvcmRlci1ib3g7Cn0KCmgzLApwIHsKICBtYXJnaW4tdG9wOiAwOwogIG1hcmdpbi1ib3R0b206IDA7Cn0KCi5jYXJkIHsKICBtYXJnaW46IDAgYXV0bzsKICB3aWR0aDogNDAwcHg7CiAgYm9yZGVyLXJhZGl1czogMTBweDsKICBwYWRkaW5nOiAxMHB4OwogIGJveC1zaGFkb3c6IDBweCAwcHggMTBweCByZ2JhKDAsIDAsIDAsIDAuNSk7CiAgZGlzcGxheTogZmxleDsKICBmbGV4LWRpcmVjdGlvbjogY29sdW1uOwogIGFsaWduLWl0ZW1zOiBjZW50ZXI7CiAgY3Vyc29yOiBwb2ludGVyOwogIHRyYW5zaXRpb24tcHJvcGVydHk6IHRyYW5zZm9ybTsKICB0cmFuc2l0aW9uLWR1cmF0aW9uOiB2YXIoLS10aW1lKTsKICB0cmFuc2l0aW9uLXRpbWluZy1mdW5jdGlvbjogdmFyKC0tdGltZS1mdW5jdGlvbik7Cn0KCi5jYXJkLWRlc2NyaXB0aW9uLXdyYXBwZXIgewogIGJvcmRlci1yYWRpdXM6IDEwcHg7CiAgdGV4dC1hbGlnbjogY2VudGVyOwogIHBhZGRpbmc6IDEwcHggMDsKICB0cmFuc2l0aW9uLXByb3BlcnR5OiBhbGw7CiAgdHJhbnNpdGlvbi1kdXJhdGlvbjogdmFyKC0tdGltZSk7CiAgdHJhbnNpdGlvbi10aW1pbmctZnVuY3Rpb246IHZhcigtLXRpbWUtZnVuY3Rpb24pOwp9CgouY2FyZC10aXRsZSB7CiAgZm9udC1zaXplOiAxNHB4OwogIGNvbG9yOiAjMTQ2Yzk0Owp9CgouY2FyZC10ZXh0IHsKICBmb250LXNpemU6IDEycHg7CiAgbWFyZ2luLXRvcDogNXB4OwogIGNvbG9yOiAjMTlhN2NlOwp9

1. Voor de bovenliggende container (div met de classnaam `container`), stel de eigenschap `perspective` in op `400px` om een 3D-ruimte te creëren voor de kaarttransformaties.
2. Om de kaart (`div` met de classnaam `card`) dichter bij de gebruiker te brengen, gebruik de functie `translateZ()` met een waarde van `50px`. Dit simuleert dat de kaart naar voren beweegt in de 3D-ruimte.
3. Pas een skew-effect toe langs de x-as op de kaartbeschrijving (`div` met de classnaam `card-description-wrapper`) met behulp van de eigenschap `transform` en de functie `skewX()` met een waarde van `10deg`.

OnJvb3QgewogIC0tdGltZTogNDAwMG1zOwogIC0tdGltZS1mdW5jdGlvbjogY3ViaWMtYmV6aWVyKDAuMTY1LCAwLjg0LCAwLjQ0LCAxKTsKfQoKLmNvbnRhaW5lciB7CiAgYm94LXNoYWRvdzogMHB4IDBweCA1cHggcmdiYSgwLCAwLCAwLCAwLjUpOwogIHBhZGRpbmc6IDIwcHg7CiAgYm9yZGVyLXJhZGl1czogMTBweDsKCiAgcGVyc3BlY3RpdmU6IDQwMHB4Owp9CgouY2FyZDpob3ZlciB7CiAgdHJhbnNmb3JtOiB0cmFuc2xhdGVaKDUwcHgpOwp9CgouY2FyZDpob3ZlciAuY2FyZC1kZXNjcmlwdGlvbi13cmFwcGVyIHsKICBib3gtc2hhZG93OiAwcHggMHB4IDEwcHggcmdiYSgwLCAwLCAwLCAwLjUpOwogIGJhY2tncm91bmQtY29sb3I6ICNmNmYxZjE7CgogIHRyYW5zZm9ybTogc2tld1goMTBkZWcpOwp9CgovKiBOb3QgdGhlIGN1cnJlbnQgZm9jdXMgKi8KKiB7CiAgYm94LXNpemluZzogYm9yZGVyLWJveDsKfQoKaDMsCnAgewogIG1hcmdpbi10b3A6IDA7CiAgbWFyZ2luLWJvdHRvbTogMDsKfQoKLmNhcmQgewogIG1hcmdpbjogMCBhdXRvOwogIHdpZHRoOiA0MDBweDsKICBib3JkZXItcmFkaXVzOiAxMHB4OwogIHBhZGRpbmc6IDEwcHg7CiAgYm94LXNoYWRvdzogMHB4IDBweCAxMHB4IHJnYmEoMCwgMCwgMCwgMC41KTsKICBkaXNwbGF5OiBmbGV4OwogIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47CiAgYWxpZ24taXRlbXM6IGNlbnRlcjsKICBjdXJzb3I6IHBvaW50ZXI7CiAgdHJhbnNpdGlvbi1wcm9wZXJ0eTogdHJhbnNmb3JtOwogIHRyYW5zaXRpb24tZHVyYXRpb246IHZhcigtLXRpbWUpOwogIHRyYW5zaXRpb24tdGltaW5nLWZ1bmN0aW9uOiB2YXIoLS10aW1lLWZ1bmN0aW9uKTsKfQoKLmNhcmQtZGVzY3JpcHRpb24td3JhcHBlciB7CiAgYm9yZGVyLXJhZGl1czogMTBweDsKICB0ZXh0LWFsaWduOiBjZW50ZXI7CiAgcGFkZGluZzogMTBweCAwOwogIHRyYW5zaXRpb24tcHJvcGVydHk6IGFsbDsKICB0cmFuc2l0aW9uLWR1cmF0aW9uOiB2YXIoLS10aW1lKTsKICB0cmFuc2l0aW9uLXRpbWluZy1mdW5jdGlvbjogdmFyKC0tdGltZS1mdW5jdGlvbik7Cn0KCi5jYXJkLXRpdGxlIHsKICBmb250LXNpemU6IDE0cHg7CiAgY29sb3I6ICMxNDZjOTQ7Cn0KCi5jYXJkLXRleHQgewogIGZvbnQtc2l6ZTogMTJweDsKICBtYXJnaW4tdG9wOiA1cHg7CiAgY29sb3I6ICMxOWE3Y2U7Cn0=

Verhoog je stylingvaardigheden door geavanceerde CSS-technieken voor modern webdesign te beheersen. Positioneer en beheer elementen nauwkeurig met geavanceerde positioneringsstrategieën. Creëer vloeiende overgangen en boeiende animaties om de gebruikerservaring te verbeteren. Transformeer en manipuleer elementen voor dynamische visuele effecten. Bouw responsieve ontwerpen die zich aanpassen aan verschillende apparaten en optimaliseer je workflow met CSS-preprocessors zoals Sass.

Onderzoek wat cursisten kunnen verwachten van deze cursus over geavanceerde HTML- en CSS-styling. Welke voorkennis is vereist voordat je aan de cursus begint? Welke onderwerpen komen aan bod?

Elementen positioneren en beheren op webpagina's. Inzicht in verschillende positioneringseigenschappen, het gebruik van de stapelvolgorde om de zichtbaarheid van overlappende elementen te regelen, en het afhandelen van content-overloop.

Onderzoek de kracht van overgangen en leer hoe u de gebruikerservaring kunt verbeteren. Ontdek hoe u eigenschappen soepel en geleidelijk tot leven brengt, waardoor naadloze statusovergangen ontstaan.

Leer over de animatie-eigenschap en hoe deze kan worden gebruikt om dynamische en boeiende ontwerpen te creëren. Ontdek hoe u complexe animaties maakt met behulp van keyframes en hoe u de animatie beheerst.

Ontdek de transform-eigenschap, waarmee het uiterlijk en de positie van elementen op een webpagina kunnen worden aangepast. Leer hoe u elementen kunt schalen, roteren, schuin trekken en verplaatsen in twee en drie dimensies. Combineer meerdere transformaties om complexere effecten te creëren.

De principes en technieken die worden gebruikt in adaptief/responsief ontwerp zijn gericht op het toegankelijk en visueel aantrekkelijk maken van websites en applicaties op verschillende apparaten, schermformaten en oriëntaties.

Leer over preprocessors in CSS en hoe deze kunnen helpen om efficiëntere en beter onderhoudbare code te schrijven. Begrijp hoe preprocessors het werkproces kunnen vereenvoudigen en schonere CSS-code kunnen genereren.

Uitdaging: Combineren van Translatie en Schuintrekken

Taak

Awesome!

Uitdaging: Combineren van Translatie en Schuintrekken

Taak