{"id":51335,"date":"2024-06-12T07:00:00","date_gmt":"2024-06-12T14:00:00","guid":{"rendered":"https:\/\/dhblog.dream.press\/blog\/?p=51335"},"modified":"2025-01-07T06:06:29","modified_gmt":"2025-01-07T14:06:29","slug":"css-transformation","status":"publish","type":"post","link":"https:\/\/www-dev.dreamhost.com\/blog\/de\/css-transformation\/","title":{"rendered":"Erste Schritte mit der CSS Transform-Eigenschaft"},"content":{"rendered":"<p>Sie haben das <a href=\"https:\/\/www.dreamhost.com\/glossary\/web-design\/html\/\" target=\"_blank\" rel=\"noopener\">HTML<\/a> geschrieben, Ihr <a href=\"https:\/\/www.dreamhost.com\/glossary\/web-design\/css\/\" target=\"_blank\" rel=\"noopener\">CSS<\/a> scheint genau richtig zu sein, und Ihre Webseite sieht gro\u00dfartig aus. Aber etwas fehlt. Sie m\u00f6chten, dass Ihre Website lebendig wirkt, wirklich heraussticht.<\/p>\n<p>Hier kommt die <a target=\"_blank\" href=\"https:\/\/www.dreamhost.com\/blog\/de\/css-frameworks\/\" rel=\"noopener\">CSS-Transformation<\/a> ins Spiel.<\/p>\n<p>Diese leistungsstarke Funktion erm\u00f6glicht es Ihnen, Elemente auf Ihrer Seite zu verschieben, zu vergr\u00f6\u00dfern, zu drehen und sogar zu verzerren. Es ist, als w\u00fcrden Sie ein wenig Magie hinzuf\u00fcgen, was Ihre Designs interaktiv und dynamisch wirken l\u00e4sst.<\/p>\n<p>Denken Sie an Websites, auf denen Sie Bilder gesehen haben, die sich neigen, wenn Sie mit der Maus dar\u00fcber fahren, einen Zoom-Effekt, um etwas genauer zu betrachten, oder ein Icon auf einem Button, das sich bewegt, wenn Sie mit der Maus dar\u00fcber fahren.<\/p>\n<p>Das sind CSS-Transformationen, die im Hintergrund arbeiten.<\/p>\n<p>Es ist eine einfache Eigenschaft, die die Art und Weise, wie Benutzer mit Ihrer Website interagieren, vollst\u00e4ndig ver\u00e4ndern kann. In diesem Leitfaden werden wir lernen, wie man interaktive visuelle Effekte erstellt, die Ihre Website aus der Masse hervorheben werden.<\/p>\n<p>Lassen Sie uns eintauchen!<\/p>\n<h2 id=\"h-understanding-the-basics-of-css-transform\" class=\"wp-block-heading\">Grundlagen von CSS Transform verstehen<\/h2>\n<p>Bevor Sie mit CSS Transform beginnen, ben\u00f6tigen Sie eine solide CSS-Grundlage. Wenn Sie CSS noch nicht kennen, schauen Sie sich unseren Blogbeitrag zum <a target=\"_blank\" href=\"https:\/\/www.dreamhost.com\/blog\/de\/css-lernen\/\" rel=\"noopener\">Lernen von CSS<\/a> an.<\/p>\n<p>Jetzt gehen wir direkt zu CSS-Transformationen \u00fcber. CSS-Transformationen erm\u00f6glichen es Ihnen, ein Element visuell zu manipulieren.<\/p>\n<p>Denken Sie an Drehen, Skalieren, Verzerren oder Verschieben. Diese \u00c4nderungen finden in einem 2D- oder 3D-Raum statt und bieten Ihnen viel kreativen Freiraum.<\/p>\n<p>Hier ist, wie das Hinzuf\u00fcgen einer einfachen CSS-Transformation zu einem Element aussieht:<\/p>\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=\"ein Beispiel f\u00fcr eine einfache CSS-Transformation eines Elements\" 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<p>Hier:<\/p>\n<ul class=\"wp-block-list\"><li><strong>.<code>element<\/code><\/strong> ist der Selektor f\u00fcr das Element, das Sie transformieren.<\/li><li><strong><code>function(value)<\/code><\/strong> sagt Ihnen die spezifische Transformation und wie viel davon Sie m\u00f6chten.<\/li><\/ul>\n<p>Die Transform-Eigenschaft unterst\u00fctzt mehrere Funktionen, die kombiniert werden k\u00f6nnen, um komplexe 2D- und 3D-Transformationen zu erstellen.<\/p>\n<p>Lassen Sie uns einige davon erkunden, sollen wir?<\/p>\n<h2 id=\"h2_exploring-2d-css-transformations\" class=\"wp-block-heading\">Erkundung von 2D-CSS-Transformationen<\/h2>\n<p>CSS-Transformationen sind wirklich cool \u2014- sie erm\u00f6glichen es Ihnen, die Darstellung von Elementen auf einer Webseite zu manipulieren. Denken Sie daran, wie Sie Dinge im echten Leben bewegen, aber mit Code. Hier werden wir einige der 2-dimensionalen Transformationen betrachten, die in CSS verf\u00fcgbar sind.<\/p>\n<h3 class=\"wp-block-heading\">Rotierende Elemente<\/h3>\n<p>Eine der h\u00e4ufigsten Dinge, die Sie mit CSS-Transformationen machen k\u00f6nnen, ist Dinge zu drehen. Angenommen, Sie haben einen Button, der <strong>Klicken<\/strong> sagt, oder irgendeinen Button auf Ihrer Website. Wir k\u00f6nnen die Funktion <strong><code>rotate<\/code><\/strong> in CSS verwenden, um es etwas interessanter zu machen.<\/p>\n<p>Angenommen, Sie haben einen <a href=\"https:\/\/www.dreamhost.com\/blog\/de\/beispiele-fur-handlungsaufforderungen\/\" target=\"_blank\" rel=\"noopener\">Aufruf-zum-Handeln-Button auf Ihrer Webseite<\/a>: <strong>Klicken Sie mich<\/strong>. Hier ist, wie Sie <strong><code>rotate()<\/code><\/strong> verwenden k\u00f6nnen, um ihn hervorzuheben:<\/p>\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<p>Also, was machen wir hier?<\/p>\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 zum Rotieren der Eigenschaft auf der linken Seite und die Standard- vs. Hover-Designs f\u00fcr den &quot;Klicken&quot; Knopf auf der rechten Seite.\" 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<p>Wir haben festgelegt, dass sich ein Button um -10 Grad drehen soll, wenn jemand mit der Maus dar\u00fcberf\u00e4hrt.<\/p>\n<p>Die \u00dcbergangszeit von 0,3s gibt an, wie lange eine Animation dauern soll, bis sie abgeschlossen ist. Anstatt in einem Ruck in die gedrehte Position zu wechseln, dauert es ein wenig, um dem Benutzer einen sanften \u00dcbergang vom normalen zum gedrehten Zustand zu zeigen.<\/p>\n<h3 class=\"wp-block-heading\">Skalierungselemente<\/h3>\n<p>Die <strong><code>scale()<\/code><\/strong>-Funktion erm\u00f6glicht es Ihnen, ein Gef\u00fchl von Tiefe, Betonung und visueller Hierarchie in Ihren Entw\u00fcrfen zu schaffen.<\/p>\n<p>Nehmen wir an, Sie haben einige Kundenreferenzen zur Hand; etwas, das Sie Ihren Website-Besuchern gerne zeigen m\u00f6chten.<\/p>\n<p>Jetzt wollen wir nicht nur, dass sie flach auf der Seite sitzen. Mit ein wenig CSS-Transformation k\u00f6nnen Sie sie hervorheben lassen, wenn ein Benutzer mit dem Cursor dar\u00fcber f\u00e4hrt.<\/p>\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<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 Eigenschaft\" 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<p>Was machen wir hier?<\/p>\n<ul class=\"wp-block-list\"><li>Zuerst zielen wir auf jeden Testimonial-Container ab. Wir haben die Klasse als <strong><code>testimonial-card<\/code><\/strong> angenommen.<\/li><li>Die <strong><code>transition<\/code><\/strong>-Eigenschaft gl\u00e4ttet den Skalierungseffekt \u00fcber 0,3 Sekunden, sodass er nat\u00fcrlich wirkt.<\/li><li>Wenn ein Benutzer mit der Maus \u00fcber eine Karte f\u00e4hrt, skaliert sie sich subtil ein wenig hoch (1,05-mal ihre urspr\u00fcngliche Gr\u00f6\u00dfe).<\/li><\/ul>\n<p>Diese kleine \u00c4nderung f\u00e4ngt das Auge des Benutzers und l\u00e4sst dieses bestimmte Testimonial hervorstechen. Es ist ein subtiler Unterschied auf der Seite, aber definitiv ein bemerkbarer.<\/p>\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<h3 class=\"wp-block-heading\">Elemente verzerren<\/h3>\n<p>Skewing ist eine Transformation, die es Ihnen erlaubt, Elemente entlang der X- oder Y-Achse zu neigen, wodurch ein Gef\u00fchl von Bewegung und Dynamik entsteht.<\/p>\n<p>Insbesondere bietet die <strong><code>skew()<\/code><\/strong> Transformation eine M\u00f6glichkeit, ein Gef\u00fchl von Bewegung und Dynamik in die Elemente Ihrer Website zu bringen.<\/p>\n<p>Erw\u00e4gen Sie einen Abschnitt, der Kundenbewertungen gewidmet ist. Hier ist, wie Sie <strong><code>skew()<\/code><\/strong> verwenden k\u00f6nnen, um sie hervorzuheben:<\/p>\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<p>Wenn ein Benutzer \u00fcber ein Testimonial f\u00e4hrt, neigt es sich subtil entlang der X-Achse um -10 Grad.<\/p>\n<p>Diese leichte Verzerrung, erreicht durch die <strong><code>skewX()<\/code><\/strong> Funktion innerhalb der CSS Transform-Eigenschaft, <a href=\"https:\/\/www.dreamhost.com\/blog\/de\/elemente-des-webdesigns\/\" target=\"_blank\" rel=\"noopener\">verleiht visuelles Interesse<\/a> ohne \u00fcberm\u00e4\u00dfig ablenkend zu sein.<\/p>\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 transform skew-Eigenschaft\" 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<p>Sie werden auch bemerken, dass wir die \u00dcbergangseigenschaft konsequent hinzuf\u00fcgen und die Zeit als 0,3s f\u00fcr die Vollendung einer Animation angeben.<\/p>\n<h3 class=\"wp-block-heading\">Elemente \u00fcbersetzen oder verschieben<\/h3>\n<p>\u00dcbersetzung im <a href=\"https:\/\/www.dreamhost.com\/de\/professionelle-dienste\/design\/individuelles-webdesign\/\" target=\"_blank\" rel=\"noopener\">Webdesign<\/a> bedeutet, Elemente auf einer Seite zu verschieben.<\/p>\n<p>Denken Sie daran wie folgt: Sie positionieren Elemente auf einem Raster und k\u00f6nnen sie entlang der X-, Y- oder sogar Z-Achse verschieben, ohne etwas anderes zu \u00e4ndern oder zu bewegen.<\/p>\n<p>Angenommen, Sie haben eine Navigationsleiste auf Ihrer Website. Sie m\u00f6chten, dass sie subtil reagiert, wenn der Cursor eines Besuchers \u00fcber die Men\u00fcpunkte f\u00e4hrt.<\/p>\n<p>Mit <strong><code>translate( )<\/code><\/strong> k\u00f6nnen Sie das erm\u00f6glichen. Lassen Sie uns etwas Code ansehen, um dies besser zu verstehen:<\/p>\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<p>Was wir hier gemacht haben, ist die Anwendung eines einfachen \u00dcbergangseffekts. Wenn Sie jetzt den Cursor \u00fcber ein <strong><code>.menu-item<\/code><\/strong> bewegen, verschiebt es sich sanft 10 Pixel nach rechts. Cool, oder?<\/p>\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 f\u00fcr das \u00dcbersetzen der Eigenschaft auf der linken Seite und die Standard- vs. Hover-Designs f\u00fcr die Schaltfl\u00e4chen auf der rechten Seite.\" 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<p>Die Sch\u00f6nheit von \u00dcbersetzungen liegt darin, dass sie nicht nur auf Hover-Effekte beschr\u00e4nkt sind. Sie k\u00f6nnen sie verwenden, um coole Ein- und Ausgangs<a href=\"https:\/\/www.dreamhost.com\/blog\/de\/css-animation\/\" target=\"_blank\" rel=\"noopener\">Animationen f\u00fcr Ihre Website<\/a> Elemente zu erstellen, Elemente zu bewegen, die f\u00fcr spezifische Seiten relevant sind, wenn Sie sich auf dieser Seite befinden, und vieles mehr.<\/p>\n<h2 id=\"h2_basics-of-3d-css-transformations\" class=\"wp-block-heading\">Grundlagen der 3D-CSS-Transformationen<\/h2>\n<p>Wir sind jetzt vertraut damit, Dinge nach oben, unten, links und rechts zu bewegen \u2014 das ist unsere typische 2D-Bewegung.<\/p>\n<p>Jedoch erlaubt CSS Ihnen, in die Welt der 3D-Transformationen einzutreten, wo wir Elemente entlang der z-Achse manipulieren k\u00f6nnen.<\/p>\n<p>Welche 3D-Transformationen bietet CSS?<\/p>\n<ul class=\"wp-block-list\"><li>Zuerst die Rotationsfunktionen: <strong><code>rotateX(angle)<\/code>, <code>rotateY(angle)<\/code><\/strong> und<strong> <code>rotateZ(angle)<\/code>.<\/strong> Um das zu veranschaulichen, <strong><code>rotateZ<\/code><\/strong> ist unser sich drehendes Rad, <strong><code>rotateY<\/code><\/strong> ist eine umbl\u00e4tternde Seite, und <strong><code>rotateX<\/code><\/strong> ist ein M\u00fcnzwurf. Jede davon steuert die Rotation um ihre jeweilige Achse.<\/li><li><strong><code>translateZ(z)<\/code><\/strong> verschiebt ein Element entlang der Z-Achse. Ein positiver Wert bringt es n\u00e4her, w\u00e4hrend ein negativer Wert es weiter zur\u00fcckst\u00f6\u00dft. Man kann es sich wie das Einstellen des Zooms auf einer Kamera vorstellen, der auf verschiedene Tiefen fokussiert.<\/li><li>Die <strong><code>scaleZ(z)-Funktion<\/code><\/strong> erm\u00f6glicht es Ihnen, ein Element entlang der Z-Achse zu skalieren. Es ist wie das Strecken oder Zusammenpressen eines Elements entlang einer einzigen Linie. Werte gr\u00f6\u00dfer als 1 lassen es n\u00e4her erscheinen, w\u00e4hrend Werte zwischen 0 und 1 es in den Hintergrund r\u00fccken lassen.<\/li><\/ul>\n<p>Um einen 3D-Transformationseffekt zu erzeugen, m\u00fcssen Sie eine Perspektive auf das \u00fcbergeordnete Element setzen. Die Perspektiveigenschaft bestimmt den Abstand zwischen dem Betrachter und der <strong><code>z=0<\/code><\/strong> Ebene und beeinflusst, wie die 3D-Transformationen wahrgenommen werden.<\/p>\n<p>Lassen Sie uns einige weitere Stile hinzuf\u00fcgen, wie Breite, H\u00f6he und <a target=\"_blank\" href=\"https:\/\/help.dreamhost.com\/hc\/en-us\/articles\/115003016152-Adjusting-colors-in-Remixer\" rel=\"noopener\">Hintergrundfarbe<\/a>, um den \u00dcbergang deutlicher zu machen, wenn Sie es von Ihrem Bildschirm aus betrachten:<\/p>\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<p><strong>Hier ist, wie das <\/strong><a target=\"__blank\" href=\"https:\/\/www.dreamhost.com\/blog\/de\/html-lernen\/\" rel=\"noopener\"><strong>HTML<\/strong><\/a><strong> aussehen w\u00fcrde:<\/strong><\/p>\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<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 f\u00fcr 3D-Transformationen links und die Standard- vs. Hover-Designs f\u00fcr die Schaltfl\u00e4chen rechts.\" 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<p>Wir haben zwei Divs, Eltern und Kind. Die Eltern, unsere B\u00fchne, haben ihre Perspektive auf 500 Pixel eingestellt. Das Kind, ein rotes Quadrat, ist anfangs um 45 Grad entlang der Y-Achse gedreht mit <strong><code>rotateY(45deg)<\/code><\/strong>.<\/p>\n<p>Beim \u00dcberfahren verwenden wir <strong><code>transform: rotateY(0deg)<\/code><\/strong>, um die Drehung zur\u00fcckzusetzen, sodass sie sanft in ihre urspr\u00fcngliche Position zur\u00fcckkehren kann.<\/p>\n<h3 class=\"wp-block-heading\" id=\"h-controlling-the-css-transform-origin\">Steuerung des CSS-Transformationsursprungs<\/h3>\n<p>Standardm\u00e4\u00dfig finden CSS-Transformationen um die Mitte eines Elements herum statt. Sie k\u00f6nnen jedoch diesen Ursprungspunkt \u00e4ndern, indem Sie die Eigenschaft <strong><code>transform-origin<\/code><\/strong> verwenden. Diese Eigenschaft erm\u00f6glicht es Ihnen, die X-, Y- und Z-Koordinaten des Punktes anzugeben, um den herum die Transformation stattfinden soll.<\/p>\n<p>Die Syntax f\u00fcr die Eigenschaft <strong><code>transform-origin<\/code><\/strong> lautet wie folgt:<\/p>\n<pre class=\"wp-block-code\"><code>.element { \ntransform-origin: x-axis y-axis z-axis; \n}<\/code><\/pre>\n<p>Die Werte der <strong><code>x-Achse<\/code><\/strong> und <strong><code>y-Achse<\/code><\/strong> k\u00f6nnen unter Verwendung von L\u00e4ngeneinheiten (z. B. Pixel), Prozentangaben oder <a href=\"https:\/\/www.dreamhost.com\/blog\/how-to-do-keyword-research-wordpress-blog\/\" target=\"_blank\" rel=\"noopener\">Schl\u00fcsselw\u00f6rtern<\/a> (links, zentriert, rechts, oben oder unten) angegeben werden. Der Wert der <strong><code>z-Achse<\/code><\/strong> ist nur f\u00fcr 3D-Transformationen relevant und wird mit L\u00e4ngeneinheiten spezifiziert.<\/p>\n<p>Hier ist ein Beispiel, das zeigt, wie sich die \u00c4nderung des <strong><code>transform-origin<\/code><\/strong> auf eine Drehung auswirkt:<\/p>\n<pre class=\"wp-block-code\"><code>.box { \ntransform: rotate(45deg); \ntransform-origin: top left; \n}<\/code><\/pre>\n<p>In diesem Fall wird das Element um 45 Grad um seine obere linke Ecke statt um sein Zentrum rotieren.<\/p>\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 Drehen der transform-origin-Eigenschaft auf der linken Seite, und die Designs vorher vs. nachher f\u00fcr das Element auf der rechten Seite.\" 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<p>Die Eigenschaft <strong><code>transform-origin<\/code><\/strong> erm\u00f6glicht Ihnen eine fein abgestimmte Kontrolle dar\u00fcber, wie Transformationen angewendet werden, und erm\u00f6glicht es Ihnen, pr\u00e4zisere und <a href=\"https:\/\/www.dreamhost.com\/blog\/de\/wordpress-webdesign-trends\/\" target=\"_blank\" rel=\"noopener\">visuell ansprechende Effekte<\/a> zu erstellen.<\/p>\n<h2 id=\"h2_creating-complex-css-transform-effects-by-combining-them\" class=\"wp-block-heading\">Erstellen komplexer CSS-Transform-Effekte durch deren Kombination<\/h2>\n<p>Einer der m\u00e4chtigsten Aspekte der CSS-Transform-Eigenschaft ist die M\u00f6glichkeit, mehrere Transformationen zu kombinieren, um komplexe und visuell beeindruckende Effekte zu erzeugen. Indem Sie verschiedene Transformationsfunktionen zusammenketten, k\u00f6nnen Sie Ihre Kreativit\u00e4t entfalten und einzigartige und fesselnde Designs erschaffen.<\/p>\n<p>Angenommen, Sie haben eine Produktkarte auf Ihrer E-Commerce-Website. Wenn ein Benutzer \u00fcber die Karte f\u00e4hrt, m\u00f6chten Sie, dass sie sich vergr\u00f6\u00dfert, leicht dreht und mit einem Schatteneffekt von der Seite abhebt:<\/p>\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<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 f\u00fcr das Kombinieren von CSS-Transformationseffekten links und die Standard- vs. Hover-Designs f\u00fcr die Produktkarte rechts.\" 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<p>Wenn ein Benutzer mit der Maus \u00fcber die Produktkarte f\u00e4hrt, skaliert sie sanft auf das 1,05-fache ihrer urspr\u00fcnglichen Gr\u00f6\u00dfe, dreht sich um 5 Grad und erh\u00e4lt einen Schlagschatten, der einen gehobenen Effekt erzeugt. Die Kombination aus Skalierung, Drehung und Schatten schafft eine dynamische und ansprechende Interaktion.<\/p>\n<h2 id=\"h2_wrap-up-and-continued-learning\" class=\"wp-block-heading\">Zusammenfassung und kontinuierliches Lernen<\/h2>\n<p>Sie haben Zeit investiert, um CSS-Transformationen zu lernen: Drehen, Gr\u00f6\u00dfen\u00e4nderung, Schr\u00e4gstellung und Positionierung, die es Ihnen erm\u00f6glichen, einige anspruchsvolle visuelle Effekte zu erzeugen. Diese F\u00e4higkeit ist wirklich wertvoll f\u00fcr <a target=\"_blank\" href=\"https:\/\/www.dreamhost.com\/blog\/de\/website-leitfaden-fur-anfanger\/\" rel=\"noopener\">Websites zu erstellen, die gut funktionieren<\/a> auf verschiedenen Bildschirmen und um Ihre Websites visuell ansprechender zu machen.<\/p>\n<p>Dennoch gibt es <em>noch<\/em> mehr, was Sie damit tun k\u00f6nnen. Wenn Sie daran interessiert sind, weiter zu gehen, k\u00f6nnten Sie sich einige dieser Bereiche anschauen:<\/p>\n<ul class=\"wp-block-list\"><li>Mit CSS flie\u00dfende \u00dcberg\u00e4nge und Animationen erstellen.<\/li><li>3D-Transformationen erkunden, um Ihren Designs Tiefe zu verleihen.<\/li><li>Lernen, wie man SVG-Bilder f\u00fcr komplexere Effekte animiert.<\/li><li>Kreative Wege finden, Transformationen mit anderen CSS-Eigenschaften zu kombinieren.<\/li><li>Lernen Sie <a target=\"_blank\" href=\"https:\/\/www.dreamhost.com\/blog\/de\/tailwind-css\/\" rel=\"noopener\">Tailwind CSS<\/a> und <a target=\"_blank\" href=\"https:\/\/www.dreamhost.com\/blog\/de\/bootstrap-leitfaden\/\" rel=\"noopener\">Bootstrap CSS<\/a>, um das Gesamtbild Ihrer Seite zu verbessern.<\/li><\/ul>\n<p>Der beste Weg, sich zu verbessern, ist, damit weiterzuarbeiten und neue Dinge auszuprobieren. So entdeckst du, was m\u00f6glich ist und entwickelst deinen eigenen einzigartigen Stil.<\/p>\n<p>Wenn Sie mit CSS beginnen, ben\u00f6tigen Sie wahrscheinlich ein schnelles Hosting, das Ihre Website nicht verlangsamt. Hier kommen die superschnellen <a target=\"_blank\" href=\"https:\/\/www.dreamhost.com\/de\/hosting\/\" rel=\"noopener\">Shared Hosting-Pl\u00e4ne von DreamHost<\/a> f\u00fcr alle Ihre Website-Anforderungen!<\/p>\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>Bringen Sie Ihre Website auf ein neues Level, indem Sie das Potenzial von CSS transform freischalten. Diese praktischen Tipps helfen Ihnen, CSS-Transform-Werte wie ein Profi zu implementieren.<\/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":"","toc_headlines":"[[\"h-understanding-the-basics-of-css-transform\",\"Grundlagen von CSS Transform verstehen\"],[\"h2_exploring-2d-css-transformations\",\"Erkundung von 2D-CSS-Transformationen\"],[\"h2_basics-of-3d-css-transformations\",\"Grundlagen der 3D-CSS-Transformationen\"],[\"h2_creating-complex-css-transform-effects-by-combining-them\",\"Erstellen komplexer CSS-Transform-Effekte durch deren Kombination\"],[\"h2_wrap-up-and-continued-learning\",\"Zusammenfassung und kontinuierliches Lernen\"]]","hide_toc":false,"footnotes":""},"categories":[14509],"tags":[],"class_list":["post-51335","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-webdesign-de"],"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>Erste Schritte mit der CSS Transform-Eigenschaft - DreamHost Blog<\/title>\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\/de\/css-transformation\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Erste Schritte mit der CSS Transform-Eigenschaft\" \/>\n<meta property=\"og:description\" content=\"Bringen Sie Ihre Website auf ein neues Level, indem Sie das Potenzial von CSS transform freischalten. Diese praktischen Tipps helfen Ihnen, CSS-Transform-Werte wie ein Profi zu implementieren.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www-dev.dreamhost.com\/blog\/de\/css-transformation\/\" \/>\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-01-07T14:06:29+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":"Erste Schritte mit der CSS Transform-Eigenschaft - DreamHost Blog","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\/de\/css-transformation\/","og_locale":"en_US","og_type":"article","og_title":"Erste Schritte mit der CSS Transform-Eigenschaft","og_description":"Bringen Sie Ihre Website auf ein neues Level, indem Sie das Potenzial von CSS transform freischalten. Diese praktischen Tipps helfen Ihnen, CSS-Transform-Werte wie ein Profi zu implementieren.","og_url":"https:\/\/www-dev.dreamhost.com\/blog\/de\/css-transformation\/","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-01-07T14:06:29+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\/de\/css-transformation\/#article","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/de\/css-transformation\/"},"author":{"name":"Ian Hernandez","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/person\/220faf2464d5ae08e41cf5f3b28fdc96"},"headline":"Erste Schritte mit der CSS Transform-Eigenschaft","datePublished":"2024-06-12T14:00:00+00:00","dateModified":"2025-01-07T14:06:29+00:00","mainEntityOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/de\/css-transformation\/"},"wordCount":1717,"publisher":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/de\/css-transformation\/#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":["Webdesign"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www-dev.dreamhost.com\/blog\/de\/css-transformation\/","url":"https:\/\/www-dev.dreamhost.com\/blog\/de\/css-transformation\/","name":"Erste Schritte mit der CSS Transform-Eigenschaft - DreamHost Blog","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/de\/css-transformation\/#primaryimage"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/de\/css-transformation\/#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-01-07T14:06:29+00:00","breadcrumb":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/de\/css-transformation\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www-dev.dreamhost.com\/blog\/de\/css-transformation\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/de\/css-transformation\/#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\/de\/css-transformation\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/dhblog.dream.press\/blog\/"},{"@type":"ListItem","position":2,"name":"Erste Schritte mit der CSS Transform-Eigenschaft"}]},{"@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":"de","translations":{"de":51335,"es":47158,"en":47128,"pl":51292,"pt":51332,"ru":51341,"uk":51353,"it":67918,"fr":69473,"nl":69501},"pll_sync_post":[],"_links":{"self":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/51335","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=51335"}],"version-history":[{"count":3,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/51335\/revisions"}],"predecessor-version":[{"id":59829,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/51335\/revisions\/59829"}],"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=51335"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/categories?post=51335"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/tags?post=51335"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}