{"id":69501,"date":"2024-06-12T07:00:00","date_gmt":"2024-06-12T14:00:00","guid":{"rendered":"https:\/\/dhblog.dream.press\/blog\/?p=69501"},"modified":"2025-05-26T09:13:21","modified_gmt":"2025-05-26T16:13:21","slug":"kennismaken-met-de-css-transform-eigenschap-nl","status":"publish","type":"post","link":"https:\/\/www-dev.dreamhost.com\/blog\/nl\/kennismaken-met-de-css-transform-eigenschap-nl\/","title":{"rendered":"Kennismaken Met De CSS Transform Eigenschap"},"content":{"rendered":"\n<p>Je hebt de <a href=\"https:\/\/www.dreamhost.com\/glossary\/web-design\/html\/\" target=\"_blank\" rel=\"noopener\">HTML<\/a> geschreven, je <a href=\"https:\/\/www.dreamhost.com\/glossary\/web-design\/css\/\" target=\"_blank\" rel=\"noopener\">CSS<\/a> lijkt precies goed, en je webpagina ziet er geweldig uit. Maar er ontbreekt iets. Je wilt dat je website levendig aanvoelt, echt knalt.<\/p>\n\n\n<p>Daar komt <a target=\"_blank\" href=\"https:\/\/www.dreamhost.com\/blog\/css-frameworks\/\" rel=\"noopener\">CSS transform<\/a> om de hoek kijken.<\/p>\n\n\n<p>Deze krachtige functie stelt je in staat om elementen op je pagina te verplaatsen, te vergroten, te draaien en zelfs te kantelen. Het is alsof je een beetje magie toevoegt, waardoor je ontwerpen interactief en dynamisch aanvoelen.<\/p>\n\n\n<p>Denk aan websites waar je afbeeldingen hebt gezien die kantelen wanneer je eroverheen zweeft, een zoom-in-effect om iets van dichterbij te bekijken, of een icoon op een knop dat beweegt wanneer je eroverheen zweeft.<\/p>\n\n\n<p>Dat zijn CSS-transformaties die op de achtergrond werken.<\/p>\n\n\n<p>Het is een eenvoudige eigenschap die volledig kan veranderen hoe gebruikers met je website omgaan. In deze handleiding gaan we leren hoe je interactieve visuele effecten kunt cre\u00ebren die je website laten opvallen tussen de menigte.<\/p>\n\n\n<p>Laten we beginnen!<\/p>\n\n\n<h2 id=\"h-understanding-the-basics-of-css-transform\" class=\"wp-block-heading\">De Basisbeginselen Van CSS Transformatie Begrijpen<\/h2>\n\n\n<p>Voordat je in CSS-transform duikt, moet je een solide CSS-basis hebben. Als je CSS nog niet kent, bekijk dan onze blogpost over <a target=\"_blank\" href=\"https:\/\/www.dreamhost.com\/blog\/learn-css\/\" rel=\"noopener\">CSS leren<\/a>.<\/p>\n\n\n<p>Laten we nu direct overgaan naar CSS-transformaties. CSS-transformaties laten je visueel een element manipuleren.<\/p>\n\n\n<p>Denk aan roteren, schalen, schuinen of verplaatsen. Deze veranderingen vinden plaats in een 2D- of 3D-ruimte waardoor je veel creatieve vrijheid hebt.<\/p>\n\n\n<p>Hier is hoe het toevoegen van een eenvoudige CSS-transformatie aan een element eruitziet:<\/p>\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1600\" height=\"677\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/00_simple_css_transform.webp\" alt=\"een voorbeeld van een eenvoudige CSS-transformatie op een element\" class=\"wp-image-47141 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/00_simple_css_transform.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/00_simple_css_transform-300x127.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/00_simple_css_transform-1024x433.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/00_simple_css_transform-768x325.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/00_simple_css_transform-1536x650.webp 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/00_simple_css_transform-600x254.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/00_simple_css_transform-1200x508.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/00_simple_css_transform-730x309.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/00_simple_css_transform-1460x618.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/00_simple_css_transform-784x332.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/00_simple_css_transform-1568x663.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/00_simple_css_transform-877x371.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/677;\" \/><\/figure>\n\n\n<p>Hier:<\/p>\n\n\n<ul class=\"wp-block-list\">\n<li><strong>.<code>element<\/code><\/strong> is de selector voor het element dat je transformeert.<\/li>\n\n\n\n<li><strong><code>function(value)<\/code><\/strong> vertelt je de specifieke transformatie en hoeveel ervan je wilt.<\/li>\n\n\n<\/ul>\n\n\n<p>De transform eigenschap ondersteunt meerdere functies, die gecombineerd kunnen worden om complexe 2D en 3D transformaties te cre\u00ebren.<\/p>\n\n\n<p>Laten we er een paar verkennen, zullen we?<\/p>\n\n\n<h2 id=\"h2_exploring-2d-css-transformations\" class=\"wp-block-heading\">Verkennen Van 2D CSS-Transformaties<\/h2>\n\n\n<p>CSS-transformaties zijn echt gaaf \u2014 ze laten je manipuleren hoe elementen worden weergegeven op een webpagina. Denk erover alsof je spullen in het echte leven verplaatst, maar dan met code. Hier bekijken we enkele van de 2-dimensionale transformaties die beschikbaar zijn in CSS.<\/p>\n\n\n<h3 class=\"wp-block-heading\">Roterende Elementen<\/h3>\n\n\n<p>Een van de meest voorkomende dingen die je kunt doen met CSS-transformaties is dingen draaien. Stel je voor dat je een knop hebt die zegt <strong>Klik op Mij<\/strong>, of een willekeurige knop op je website. We kunnen de <strong><code>rotate<\/code><\/strong> functie in CSS gebruiken om het wat interessanter te maken.<\/p>\n\n\n<p>Stel je hebt een <a href=\"https:\/\/www.dreamhost.com\/blog\/call-to-action-examples\/\" target=\"_blank\" rel=\"noopener\">oproep-tot-actieknop op je website<\/a>: <strong>Klik Mij<\/strong>. Hier is hoe je <strong><code>rotate()<\/code><\/strong> kunt gebruiken om het te laten opvallen:<\/p>\n\n\n<pre class=\"wp-block-code\"><code>.cta-button {\n  transition: transform 0.3s;\n}\n\n.cta-button:hover {\n  transform: rotate(-10deg);\n}<\/code><\/pre>\n\n\n<p>Dus, wat doen we hier?<\/p>\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1600\" height=\"1299\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/01_rotating_elements.webp\" alt=\"CSS-code voor het roteren van de eigenschap aan de linkerkant, en de standaard vs. hover ontwerpen voor de &quot;Klik&quot; knop aan de rechterkant.\" class=\"wp-image-47143 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/01_rotating_elements.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/01_rotating_elements-300x244.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/01_rotating_elements-1024x831.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/01_rotating_elements-768x624.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/01_rotating_elements-1536x1247.webp 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/01_rotating_elements-600x487.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/01_rotating_elements-1200x974.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/01_rotating_elements-730x593.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/01_rotating_elements-1460x1185.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/01_rotating_elements-784x637.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/01_rotating_elements-1568x1273.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/01_rotating_elements-877x712.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/1299;\" \/><\/figure>\n\n\n<p>We hebben gespecificeerd dat wanneer iemand met zijn muis over een knop zweeft, deze -10 graden moet draaien.<\/p>\n\n\n<p>De overgang van 0.3s geeft aan hoe lang een animatie moet duren om te voltooien. Dus in plaats van abrupt over te schakelen naar de gedraaide positie, duurt het even om de gebruiker een soepele overgang van normaal naar de gedraaide staat te laten zien.<\/p>\n\n\n<h3 class=\"wp-block-heading\">Elementen Schalen<\/h3>\n\n\n<p>De <strong><code>scale()<\/code><\/strong> functie stelt je in staat om een gevoel van diepte, nadruk en visuele hi\u00ebrarchie binnen je ontwerpen te cre\u00ebren.<\/p>\n\n\n<p>Stel je voor dat je een paar klantgetuigenissen bij de hand hebt; iets dat je graag wilt laten zien aan je websitebezoekers.<\/p>\n\n\n<p>Nu willen we niet alleen dat ze plat op de pagina liggen. Met een beetje CSS-transformatie kun je ze laten opvallen wanneer de cursor van een gebruiker eroverheen zweeft.<\/p>\n\n\n<pre class=\"wp-block-code\"><code>.testimonial-card {\n  transition: transform 0.3s;\n}\n\n.testimonial-card:hover {\n  transform: scale(1.1);\n}<\/code><\/pre>\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1600\" height=\"1299\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/02_scaling_elements.webp\" alt=\"CSS transform scale-eigenschap\" class=\"wp-image-47145 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/02_scaling_elements.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/02_scaling_elements-300x244.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/02_scaling_elements-1024x831.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/02_scaling_elements-768x624.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/02_scaling_elements-1536x1247.webp 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/02_scaling_elements-600x487.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/02_scaling_elements-1200x974.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/02_scaling_elements-730x593.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/02_scaling_elements-1460x1185.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/02_scaling_elements-784x637.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/02_scaling_elements-1568x1273.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/02_scaling_elements-877x712.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/1299;\" \/><\/figure>\n\n\n<p>Wat doen we hier?<\/p>\n\n\n<ul class=\"wp-block-list\">\n<li>Eerst richten we ons op elke testimonial-container. We hebben de klasse <strong><code>testimonial-card<\/code><\/strong> aangenomen.<\/li>\n\n\n\n<li>De <strong><code>transition<\/code><\/strong>-eigenschap maakt het schaaleffect over 0,3 seconden vloeiend, zodat het natuurlijk aanvoelt.&nbsp;<\/li>\n\n\n\n<li>Wanneer een gebruiker met zijn muis over een kaart beweegt, schaalt deze subtiel een beetje op (1,05 keer de oorspronkelijke grootte).<\/li>\n\n\n<\/ul>\n\n\n<p>Deze kleine verandering trekt de aandacht van de gebruiker en laat die specifieke getuigenis opvallen. Het is een subtiel verschil op de pagina, maar zeker een opvallend verschil.<\/p>\n\n\n<div class=\"article-newsletter article-newsletter--gradient\">\n\n\n<h2>Get Content Delivered Straight to Your Inbox<\/h2><p>Subscribe now to receive all the latest updates, delivered directly to your inbox.<\/p><form class=\"nwsl-form\" id=\"newsletter_block_\" novalidate><div class=\"messages\"><\/div><div class=\"form-group\"><label for=\"input_newsletter_block_\"><input type=\"email\"name=\"email\"id=\"input_newsletter_block_\"placeholder=\"Enter your email address\"novalidatedisabled=\"disabled\"\/><\/label><button type=\"submit\"class=\"btn btn--brand\"disabled=\"disabled\"><span>Sign Me Up!<\/span><svg width=\"21\" height=\"14\" viewBox=\"0 0 21 14\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n<path d=\"M13.8523 0.42524L12.9323 1.34521C12.7095 1.56801 12.7132 1.9304 12.9404 2.14865L16.7241 5.7823H0.5625C0.251859 5.7823 0 6.03416 0 6.3448V7.6573C0 7.96794 0.251859 8.2198 0.5625 8.2198H16.7241L12.9405 11.8535C12.7132 12.0717 12.7095 12.4341 12.9323 12.6569L13.8523 13.5769C14.072 13.7965 14.4281 13.7965 14.6478 13.5769L20.8259 7.39879C21.0456 7.17913 21.0456 6.82298 20.8259 6.60327L14.6477 0.42524C14.4281 0.205584 14.0719 0.205584 13.8523 0.42524Z\" fill=\"white\"\/>\n<\/svg>\n<\/button><\/div><\/form><\/div>\n\n<h3 class=\"wp-block-heading\">Elementen Scheeftrekken<\/h3>\n\n\n<p>Schuine transformatie is een transformatie die je toestaat elementen langs de X- of Y-as te kantelen, waardoor een gevoel van beweging en dynamiek ontstaat.<\/p>\n\n\n<p>In het bijzonder biedt de <strong><code>skew()<\/code><\/strong> transformatie een manier om een gevoel van beweging en dynamiek aan de elementen van je website toe te voegen.<\/p>\n\n\n<p>Overweeg een sectie te wijden aan klantgetuigenissen. Hier is hoe je <strong><code>skew()<\/code><\/strong> kunt gebruiken om ze op te laten vallen:<\/p>\n\n\n<pre class=\"wp-block-code\"><code>.testimonial {\n  transition: transform 0.3s;\n}\n\n.testimonial:hover {\n  transform: skewX(-10deg);\n}<\/code><\/pre>\n\n\n<p>Wanneer een gebruiker over een getuigenis zweeft, zal het subtiel kantelen langs de X-as met -10 graden.<\/p>\n\n\n<p>Deze lichte scheefheid, bereikt door de <strong><code>skewX()<\/code><\/strong> functie binnen de CSS transform eigenschap, <a href=\"https:\/\/www.dreamhost.com\/blog\/elements-of-webdesign\/\" target=\"_blank\" rel=\"noopener\">voegt visuele interesse toe<\/a> zonder al te afleidend te zijn.<\/p>\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1600\" height=\"1299\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/03_skewing_elements.webp\" alt=\"CSS transformeer scheef eigenschap\" class=\"wp-image-47147 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/03_skewing_elements.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/03_skewing_elements-300x244.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/03_skewing_elements-1024x831.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/03_skewing_elements-768x624.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/03_skewing_elements-1536x1247.webp 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/03_skewing_elements-600x487.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/03_skewing_elements-1200x974.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/03_skewing_elements-730x593.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/03_skewing_elements-1460x1185.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/03_skewing_elements-784x637.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/03_skewing_elements-1568x1273.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/03_skewing_elements-877x712.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/1299;\" \/><\/figure>\n\n\n<p>Je zult ook merken dat we consequent de transitie-eigenschap toevoegen waarbij de tijd als 0,3s wordt gespecificeerd voor een animatie om te voltooien.<\/p>\n\n\n<h3 class=\"wp-block-heading\">Elementen Vertalen Of Verplaatsen<\/h3>\n\n\n<p>Vertaling in <a href=\"https:\/\/www.dreamhost.com\/pro-services\/design\/custom-web-design\/\" target=\"_blank\" rel=\"noopener\">webdesign<\/a> betekent het verplaatsen van elementen op een pagina.<\/p>\n\n\n<p>Denk er zo over na: je positioneert elementen op een raster en je kunt ze langs de X-, Y-, of zelfs Z-as verschuiven zonder iets anders te veranderen of te verplaatsen.<\/p>\n\n\n<p>Stel je hebt een navigatiebalk op je website. Je wilt dat deze subtiel reageert wanneer de cursor van een bezoeker over de menu-items beweegt.<\/p>\n\n\n<p>Met <strong><code>translate( )<\/code><\/strong> kun je dat laten gebeuren. Laten we wat code bekijken om dit beter te begrijpen:<\/p>\n\n\n<pre class=\"wp-block-code\"><code>.menu-item {\n  transition: transform 0.2s;\n}\n\n.menu-item:hover {\n  transform: translateX(10px);\n}<\/code><\/pre>\n\n\n<p>Wat we hier hebben gedaan, is een eenvoudig overgangseffect toepassen. Nu, wanneer je met de cursor over een <strong><code>.menu-item<\/code><\/strong> beweegt, verschuift het soepel 10 pixels naar rechts. Gaaf, h\u00e8?<\/p>\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1600\" height=\"1299\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/04_translating_or_moving_elements.webp\" alt=\"CSS-code voor het vertalen van de eigenschap aan de linkerkant, en de standaard vs. hover-ontwerpen voor de knoppen aan de rechterkant.\" class=\"wp-image-47149 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/04_translating_or_moving_elements.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/04_translating_or_moving_elements-300x244.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/04_translating_or_moving_elements-1024x831.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/04_translating_or_moving_elements-768x624.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/04_translating_or_moving_elements-1536x1247.webp 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/04_translating_or_moving_elements-600x487.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/04_translating_or_moving_elements-1200x974.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/04_translating_or_moving_elements-730x593.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/04_translating_or_moving_elements-1460x1185.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/04_translating_or_moving_elements-784x637.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/04_translating_or_moving_elements-1568x1273.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/04_translating_or_moving_elements-877x712.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/1299;\" \/><\/figure>\n\n\n<p>De schoonheid van vertalingen is dat ze niet beperkt zijn tot alleen zweefeffecten. Je kunt ze gebruiken om coole entree- en uitgangs<a href=\"https:\/\/www.dreamhost.com\/blog\/css-animation\/\" target=\"_blank\" rel=\"noopener\">animaties voor je website<\/a> elementen te cre\u00ebren, items te verplaatsen die relevant zijn voor specifieke pagina&#8217;s wanneer je op die pagina bent, en nog veel meer.<\/p>\n\n\n<h2 id=\"h2_basics-of-3d-css-transformations\" class=\"wp-block-heading\">Basisprincipes Van 3D CSS-Transformaties<\/h2>\n\n\n<p>We zijn nu bekend met dingen omhoog, omlaag, naar links en naar rechts verplaatsen \u2014 dat is onze typische 2D-beweging.<\/p>\n\n\n<p>Echter, CSS stelt je in staat om de wereld van 3D-transformaties binnen te stappen, waar we elementen langs de z-as kunnen manipuleren.<\/p>\n\n\n<p>Dus, welke 3D-transformaties biedt CSS?<\/p>\n\n\n<ul class=\"wp-block-list\">\n<li>Ten eerste, de rotatiefuncties: <strong><code>rotateX(angle)<\/code>, <code>rotateY(angle)<\/code><\/strong> en <strong><code>rotateZ(angle)<\/code><\/strong>. Om dit in perspectief te plaatsen, <strong><code>rotateZ<\/code><\/strong> is ons draaiend wiel, <strong><code>rotateY<\/code><\/strong> is een omslaande pagina, en <strong><code>rotateX<\/code><\/strong> is een muntflip. Ze beheersen elk de rotatie rond hun respectieve assen.<\/li>\n\n\n\n<li><strong><code>translateZ(z)<\/code><\/strong> vertaalt, of verplaatst, een element langs de z-as. Een positieve waarde brengt het dichterbij, terwijl een negatieve waarde het verder weg duwt. Denk hierbij aan het aanpassen van de zoom op een camera, gericht op verschillende dieptes.<\/li>\n\n\n\n<li>De <strong><code>scaleZ(z) functie<\/code><\/strong> stelt je in staat om een element langs de z-as te schalen. Het is alsof je een element uitrekt of samenperst langs een enkele lijn. Waarden groter dan 1 laten het dichterbij lijken, terwijl waarden tussen 0 en 1 het naar de achtergrond laten terugtrekken.<\/li>\n\n\n<\/ul>\n\n\n<p>Om een 3D-transformatie-effect te cre\u00ebren, moet je een perspectief instellen op het bovenliggende element. De eigenschap perspectief bepaalt de afstand tussen de kijker en het <strong><code>z=0<\/code><\/strong> vlak, wat invloed heeft op hoe de 3D-transformaties worden waargenomen.<\/p>\n\n\n<p>Laten we nog een paar stijlen toevoegen, zoals breedte, hoogte en <a target=\"_blank\" href=\"https:\/\/help.dreamhost.com\/hc\/en-us\/articles\/115003016152-Adjusting-colors-in-Remixer\" rel=\"noopener\">achtergrondkleur<\/a> om de overgang duidelijker te maken wanneer je ernaar kijkt vanaf je scherm:<\/p>\n\n\n<pre class=\"wp-block-code\"><code>.parent {\n&nbsp; perspective: 500px;\n&nbsp; width: 200px;\n&nbsp; height: 200px;\n&nbsp; margin: 100px auto;\n}\n\n.child {\n&nbsp; width: 200px;\n&nbsp; height: 200px;\n&nbsp; background-color: blue;\n&nbsp; transform: rotateY(45deg);\n&nbsp; transition: transform 0.5s;\n}\n\n.child:hover {\n&nbsp; transform: rotateY(0deg);\n}<\/code><\/pre>\n\n\n<p><strong>Hier is hoe de <\/strong><a target=\"_blank\" href=\"https:\/\/www.dreamhost.com\/blog\/learn-html\/\" rel=\"noopener\"><strong>HTML<\/strong><\/a><strong> eruit zou zien:<\/strong><\/p>\n\n\n<pre class=\"wp-block-code\"><code>&lt;body&gt;\n&nbsp; &lt;div class=\"parent\"&gt;\n&nbsp; &nbsp; &lt;div class=\"child\"&gt;&lt;\/div&gt;\n&nbsp; &lt;\/div&gt;\n&lt;\/body&gt;<\/code><\/pre>\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1600\" height=\"1299\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/05_css_3d_transforms.webp\" alt=\"CSS-code voor 3D-transformaties aan de linkerkant, en de standaard- vs. hover-ontwerpen voor de knoppen aan de rechterkant.\" class=\"wp-image-47151 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/05_css_3d_transforms.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/05_css_3d_transforms-300x244.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/05_css_3d_transforms-1024x831.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/05_css_3d_transforms-768x624.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/05_css_3d_transforms-1536x1247.webp 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/05_css_3d_transforms-600x487.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/05_css_3d_transforms-1200x974.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/05_css_3d_transforms-730x593.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/05_css_3d_transforms-1460x1185.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/05_css_3d_transforms-784x637.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/05_css_3d_transforms-1568x1273.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/05_css_3d_transforms-877x712.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/1299;\" \/><\/figure>\n\n\n<p>We hebben twee divs, ouder en kind. De ouder, ons podium, heeft zijn perspectief ingesteld op 500 pixels. Het kind, een rood vierkant, is aanvankelijk 45 graden langs de Y-as gedraaid met behulp van <strong><code>rotateY(45deg)<\/code><\/strong>.<\/p>\n\n\n<p>Bij zweven gebruiken we <strong><code>transform: rotateY(0deg)<\/code><\/strong> om de rotatie te resetten, waardoor het soepel terugkeert naar de oorspronkelijke positie.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-controlling-the-css-transform-origin\">Het Beheersen Van De CSS Transformatie-oorsprong<\/h3>\n\n\n<p>Standaard vinden CSS-transformaties plaats rond het midden van een element. Je kunt echter dit oorsprongspunt wijzigen met behulp van de <strong><code>transform-origin<\/code><\/strong> eigenschap. Deze eigenschap stelt je in staat om de X, Y en Z co\u00f6rdinaten van het punt op te geven waaromheen de transformatie moet plaatsvinden.<\/p>\n\n\n<p>De syntax voor de <strong><code>transform-origin<\/code><\/strong> eigenschap is als volgt:<\/p>\n\n\n<pre class=\"wp-block-code\"><code>.element { \ntransform-origin: x-as y-as z-as; \n}<\/code><\/pre>\n\n\n<p>De <strong><code>x-as<\/code><\/strong> en <strong><code>y-as<\/code><\/strong> waarden kunnen worden opgegeven met lengte-eenheden (bijv. pixels), percentages of <a href=\"https:\/\/www.dreamhost.com\/blog\/how-to-do-keyword-research-wordpress-blog\/\" target=\"_blank\" rel=\"noopener\">sleutelwoorden<\/a> (links, midden, rechts, boven of onder). De <strong><code>z-as<\/code><\/strong> waarde is alleen relevant voor 3D-transformaties en wordt gespecificeerd met lengte-eenheden.<\/p>\n\n\n<p>Hier is een voorbeeld dat laat zien hoe het veranderen van de <strong><code>transform-origin<\/code><\/strong> een rotatie be\u00efnvloedt:<\/p>\n\n\n<pre class=\"wp-block-code\"><code>.box { \ntransform: rotate(45deg); \ntransform-origin: top left; \n}<\/code><\/pre>\n\n\n<p>In dit geval zal het element 45 graden draaien rond zijn linkerbovenhoek in plaats van zijn centrum.<\/p>\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1600\" height=\"989\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/06_css_transform_origin_property.webp\" alt=\"CSS-code rotate transform-origin-eigenschap aan de linkerkant, en de ontwerpen voor en na voor het element aan de rechterkant.\" class=\"wp-image-47153 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/06_css_transform_origin_property.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/06_css_transform_origin_property-300x185.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/06_css_transform_origin_property-1024x633.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/06_css_transform_origin_property-768x475.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/06_css_transform_origin_property-1536x949.webp 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/06_css_transform_origin_property-600x371.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/06_css_transform_origin_property-1200x742.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/06_css_transform_origin_property-730x451.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/06_css_transform_origin_property-1460x902.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/06_css_transform_origin_property-784x485.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/06_css_transform_origin_property-1568x969.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/06_css_transform_origin_property-877x542.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/989;\" \/><\/figure>\n\n\n<p>De <strong><code>transform-origin<\/code><\/strong>-eigenschap geeft je nauwkeurige controle over hoe transformaties worden toegepast, waardoor je meer precieze en <a href=\"https:\/\/www.dreamhost.com\/blog\/wordpress-web-design-trends\/\" target=\"_blank\" rel=\"noopener\">visueel aantrekkelijke effecten<\/a> kunt cre\u00ebren.<\/p>\n\n\n<h2 id=\"h2_creating-complex-css-transform-effects-by-combining-them\" class=\"wp-block-heading\">Complexe CSS Transformatie Effecten Cre\u00ebren Door Ze Te Combineren<\/h2>\n\n\n<p>Een van de krachtigste aspecten van de CSS transform-eigenschap is de mogelijkheid om meerdere transformaties te combineren om complexe en visueel verbluffende effecten te cre\u00ebren. Door verschillende transformatiefuncties aan elkaar te koppelen, kun je je creativiteit de vrije loop laten en unieke en boeiende ontwerpen maken.<\/p>\n\n\n<p>Stel je voor dat je een productkaart op je e-commerce website hebt. Wanneer een gebruiker eroverheen zweeft, wil je dat deze groter wordt, licht draait en van de pagina af tilt met een schaduweffect:<\/p>\n\n\n<pre class=\"wp-block-code\"><code>.product-card {\n  transition: transform 0.3s, box-shadow 0.3s;\n}\n\n.product-card:hover {\n  transform: scale(1.05) rotate(5deg);\n  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);\n}<\/code><\/pre>\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1600\" height=\"1299\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/07_combining_css_transform.webp\" alt=\"Code voor het combineren van CSS-transformatie-effecten aan de linkerkant, en de standaard versus hover-ontwerpen voor de productkaart aan de rechterkant.\" class=\"wp-image-47155 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/07_combining_css_transform.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/07_combining_css_transform-300x244.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/07_combining_css_transform-1024x831.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/07_combining_css_transform-768x624.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/07_combining_css_transform-1536x1247.webp 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/07_combining_css_transform-600x487.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/07_combining_css_transform-1200x974.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/07_combining_css_transform-730x593.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/07_combining_css_transform-1460x1185.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/07_combining_css_transform-784x637.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/07_combining_css_transform-1568x1273.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/07_combining_css_transform-877x712.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/1299;\" \/><\/figure>\n\n\n<p>Wanneer een gebruiker met de muis over de productkaart beweegt, schaalt deze soepel op tot 1,05 keer zijn oorspronkelijke grootte, draait met 5 graden en krijgt een schaduw die een verheven effect cre\u00ebert. De combinatie van schalen, draaien en schaduw zorgt voor een dynamische en boeiende interactie.<\/p>\n\n\n<h2 id=\"h2_wrap-up-and-continued-learning\" class=\"wp-block-heading\">Afronding En Voortgezet Leren<\/h2>\n\n\n<p>Je hebt tijd besteed aan het leren over CSS-transformaties: roteren, schalen, kantelen en positioneren, waarmee je enkele geavanceerde visuele effecten kunt cre\u00ebren. Deze vaardigheid is echt waardevol voor <a target=\"_blank\" href=\"https:\/\/www.dreamhost.com\/blog\/beginners-website-guide\/\" rel=\"noopener\">het bouwen van websites die goed werken<\/a> op verschillende schermen en om je sites visueel aantrekkelijker te maken.<\/p>\n\n\n<p>Echter, er is <em>nog<\/em> meer dat je hiermee kunt doen. Als je ge\u00efnteresseerd bent om verder te gaan, kun je enkele van deze gebieden bekijken:<\/p>\n\n\n<ul class=\"wp-block-list\">\n<li>CSS gebruiken voor soepele overgangen en animaties.<\/li>\n\n\n\n<li>3D-transformaties verkennen om diepte aan je ontwerpen toe te voegen.<\/li>\n\n\n\n<li>Leren hoe je SVG-afbeeldingen animeert voor complexere effecten.<\/li>\n\n\n\n<li>Creatieve manieren vinden om transformaties te combineren met andere CSS-eigenschappen.<\/li>\n\n\n\n<li>Leer <a target=\"_blank\" href=\"https:\/\/www.dreamhost.com\/blog\/tailwind-css\/\" rel=\"noopener\">Tailwind CSS<\/a> en <a target=\"_blank\" href=\"https:\/\/www.dreamhost.com\/blog\/bootstrap-guide\/\" rel=\"noopener\">Bootstrap CSS<\/a> om het algehele uiterlijk van je pagina te verbeteren.<\/li>\n\n\n<\/ul>\n\n\n<p>De beste manier om beter te worden is om ermee door te gaan en nieuwe dingen te proberen. Zo ontdek je wat mogelijk is en ontwikkel je je eigen unieke stijl.<\/p>\n\n\n<p>Wanneer je begint te spelen met CSS, heb je waarschijnlijk snelle hosting nodig die je site niet vertraagt. Kies voor de supersnelle <a target=\"_blank\" href=\"https:\/\/www.dreamhost.com\/hosting\/\" rel=\"noopener\">DreamHost&#8217;s shared hosting plannen<\/a> voor al je websitebehoeften!<\/p>\n\n\n<div class=\"article-newsletter article-newsletter--gradient\">\n\n\n<h2>Get Content Delivered Straight to Your Inbox<\/h2><p>Subscribe now to receive all the latest updates, delivered directly to your inbox.<\/p><form class=\"nwsl-form\" id=\"newsletter_block_\" novalidate><div class=\"messages\"><\/div><div class=\"form-group\"><label for=\"input_newsletter_block_\"><input type=\"email\"name=\"email\"id=\"input_newsletter_block_\"placeholder=\"Enter your email address\"novalidatedisabled=\"disabled\"\/><\/label><button type=\"submit\"class=\"btn btn--brand\"disabled=\"disabled\"><span>Sign Me Up!<\/span><svg width=\"21\" height=\"14\" viewBox=\"0 0 21 14\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n<path d=\"M13.8523 0.42524L12.9323 1.34521C12.7095 1.56801 12.7132 1.9304 12.9404 2.14865L16.7241 5.7823H0.5625C0.251859 5.7823 0 6.03416 0 6.3448V7.6573C0 7.96794 0.251859 8.2198 0.5625 8.2198H16.7241L12.9405 11.8535C12.7132 12.0717 12.7095 12.4341 12.9323 12.6569L13.8523 13.5769C14.072 13.7965 14.4281 13.7965 14.6478 13.5769L20.8259 7.39879C21.0456 7.17913 21.0456 6.82298 20.8259 6.60327L14.6477 0.42524C14.4281 0.205584 14.0719 0.205584 13.8523 0.42524Z\" fill=\"white\"\/>\n<\/svg>\n<\/button><\/div><\/form><\/div>","protected":false},"excerpt":{"rendered":"<p>Breng je site naar nieuwe hoogten door het potentieel van CSS transform te ontgrendelen. Deze praktische tips helpen je om CSS transform-waarden als een professional te implementeren.<\/p>\n","protected":false},"author":1058,"featured_media":47129,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_yoast_wpseo_metadesc":"Breng je site naar nieuwe hoogten door het potentieel van CSS transform te ontketenen. Deze praktische tips helpen je om CSS transform-waarden als een professional te implementeren.","toc_headlines":"[[\"h-understanding-the-basics-of-css-transform\",\"De Basisbeginselen Van CSS Transformatie Begrijpen\"],[\"h2_exploring-2d-css-transformations\",\"Verkennen Van 2D CSS-Transformaties\"],[\"h2_basics-of-3d-css-transformations\",\"Basisprincipes Van 3D CSS-Transformaties\"],[\"h2_creating-complex-css-transform-effects-by-combining-them\",\"Complexe CSS Transformatie Effecten Cre\u00ebren Door Ze Te Combineren\"],[\"h2_wrap-up-and-continued-learning\",\"Afronding En Voortgezet Leren\"]]","hide_toc":false,"footnotes":""},"categories":[14942],"tags":[],"class_list":["post-69501","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-website-design-nl"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.3 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Kennismaken Met De CSS Transform Eigenschap - DreamHost Blog<\/title>\n<meta name=\"description\" content=\"Breng je site naar nieuwe hoogten door het potentieel van CSS transform te ontketenen. Deze praktische tips helpen je om CSS transform-waarden als een professional te implementeren.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www-dev.dreamhost.com\/blog\/nl\/kennismaken-met-de-css-transform-eigenschap-nl\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Kennismaken Met De CSS Transform Eigenschap\" \/>\n<meta property=\"og:description\" content=\"Breng je site naar nieuwe hoogten door het potentieel van CSS transform te ontketenen. Deze praktische tips helpen je om CSS transform-waarden als een professional te implementeren.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www-dev.dreamhost.com\/blog\/nl\/kennismaken-met-de-css-transform-eigenschap-nl\/\" \/>\n<meta property=\"og:site_name\" content=\"DreamHost Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/DreamHost\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-06-12T14:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-05-26T16:13:21+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/1460x1095_blog_hero_getting_to_know_the_css_transform_property.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"1095\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"Ian Hernandez\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@dreamhost\" \/>\n<meta name=\"twitter:site\" content=\"@dreamhost\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ian Hernandez\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Kennismaken Met De CSS Transform Eigenschap - DreamHost Blog","description":"Breng je site naar nieuwe hoogten door het potentieel van CSS transform te ontketenen. Deze praktische tips helpen je om CSS transform-waarden als een professional te implementeren.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www-dev.dreamhost.com\/blog\/nl\/kennismaken-met-de-css-transform-eigenschap-nl\/","og_locale":"en_US","og_type":"article","og_title":"Kennismaken Met De CSS Transform Eigenschap","og_description":"Breng je site naar nieuwe hoogten door het potentieel van CSS transform te ontketenen. Deze praktische tips helpen je om CSS transform-waarden als een professional te implementeren.","og_url":"https:\/\/www-dev.dreamhost.com\/blog\/nl\/kennismaken-met-de-css-transform-eigenschap-nl\/","og_site_name":"DreamHost Blog","article_publisher":"https:\/\/www.facebook.com\/DreamHost\/","article_published_time":"2024-06-12T14:00:00+00:00","article_modified_time":"2025-05-26T16:13:21+00:00","og_image":[{"width":1460,"height":1095,"url":"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/1460x1095_blog_hero_getting_to_know_the_css_transform_property.webp","type":"image\/webp"}],"author":"Ian Hernandez","twitter_card":"summary_large_image","twitter_creator":"@dreamhost","twitter_site":"@dreamhost","twitter_misc":{"Written by":"Ian Hernandez","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www-dev.dreamhost.com\/blog\/nl\/kennismaken-met-de-css-transform-eigenschap-nl\/#article","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/nl\/kennismaken-met-de-css-transform-eigenschap-nl\/"},"author":{"name":"Ian Hernandez","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/person\/220faf2464d5ae08e41cf5f3b28fdc96"},"headline":"Kennismaken Met De CSS Transform Eigenschap","datePublished":"2024-06-12T14:00:00+00:00","dateModified":"2025-05-26T16:13:21+00:00","mainEntityOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/nl\/kennismaken-met-de-css-transform-eigenschap-nl\/"},"wordCount":1670,"publisher":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/nl\/kennismaken-met-de-css-transform-eigenschap-nl\/#primaryimage"},"thumbnailUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/1460x1095_blog_hero_getting_to_know_the_css_transform_property.webp","articleSection":["Websiteontwerp"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www-dev.dreamhost.com\/blog\/nl\/kennismaken-met-de-css-transform-eigenschap-nl\/","url":"https:\/\/www-dev.dreamhost.com\/blog\/nl\/kennismaken-met-de-css-transform-eigenschap-nl\/","name":"Kennismaken Met De CSS Transform Eigenschap - DreamHost Blog","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/nl\/kennismaken-met-de-css-transform-eigenschap-nl\/#primaryimage"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/nl\/kennismaken-met-de-css-transform-eigenschap-nl\/#primaryimage"},"thumbnailUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/1460x1095_blog_hero_getting_to_know_the_css_transform_property.webp","datePublished":"2024-06-12T14:00:00+00:00","dateModified":"2025-05-26T16:13:21+00:00","description":"Breng je site naar nieuwe hoogten door het potentieel van CSS transform te ontketenen. Deze praktische tips helpen je om CSS transform-waarden als een professional te implementeren.","breadcrumb":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/nl\/kennismaken-met-de-css-transform-eigenschap-nl\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www-dev.dreamhost.com\/blog\/nl\/kennismaken-met-de-css-transform-eigenschap-nl\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/nl\/kennismaken-met-de-css-transform-eigenschap-nl\/#primaryimage","url":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/1460x1095_blog_hero_getting_to_know_the_css_transform_property.webp","contentUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/1460x1095_blog_hero_getting_to_know_the_css_transform_property.webp","width":1460,"height":1095,"caption":"Getting To Know The CSS Transform Property"},{"@type":"BreadcrumbList","@id":"https:\/\/www-dev.dreamhost.com\/blog\/nl\/kennismaken-met-de-css-transform-eigenschap-nl\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/dhblog.dream.press\/blog\/"},{"@type":"ListItem","position":2,"name":"Kennismaken Met De CSS Transform Eigenschap"}]},{"@type":"WebSite","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#website","url":"https:\/\/www-dev.dreamhost.com\/blog\/","name":"DreamHost Blog","description":"","publisher":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www-dev.dreamhost.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization","name":"DreamHost","url":"https:\/\/www-dev.dreamhost.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/dhblog.dream.press\/blog\/wp-content\/uploads\/2019\/01\/dh_logo-blue-2.png","contentUrl":"https:\/\/dhblog.dream.press\/blog\/wp-content\/uploads\/2019\/01\/dh_logo-blue-2.png","width":1200,"height":168,"caption":"DreamHost"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/DreamHost\/","https:\/\/x.com\/dreamhost","https:\/\/www.instagram.com\/dreamhost\/","https:\/\/www.linkedin.com\/company\/dreamhost\/","https:\/\/www.youtube.com\/user\/dreamhostusa"]},{"@type":"Person","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/person\/220faf2464d5ae08e41cf5f3b28fdc96","name":"Ian Hernandez","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/04\/ian-hernandez-dreamhost-150x150.png","url":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/04\/ian-hernandez-dreamhost-150x150.png","contentUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/04\/ian-hernandez-dreamhost-150x150.png","caption":"Ian Hernandez"},"description":"Ian is a Product Designer based in Los Angeles, California. He is responsible for driving brand and product design at DreamHost, developing and maintaining our internal design system, and writing frontend code when he can. In his free time, he enjoys walking his dog, learning history, and discovering new music online and irl. Connect with him on LinkedIn: https:\/\/www.linkedin.com\/in\/ianhernandez23\/","url":"https:\/\/www-dev.dreamhost.com\/blog\/author\/ianh\/"}]}},"lang":"nl","translations":{"nl":69501,"es":47158,"en":47128,"pl":51292,"pt":51332,"de":51335,"ru":51341,"uk":51353,"it":67918,"fr":69473},"pll_sync_post":[],"_links":{"self":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/69501","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/users\/1058"}],"replies":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/comments?post=69501"}],"version-history":[{"count":2,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/69501\/revisions"}],"predecessor-version":[{"id":69503,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/69501\/revisions\/69503"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/media\/47129"}],"wp:attachment":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/media?parent=69501"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/categories?post=69501"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/tags?post=69501"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}