CSS Transforms - Elemente bewegen & transformieren

Transforms ermöglichen es, Elemente zu verschieben, drehen, skalieren und verzerren - alles ohne den Layout-Fluss zu beeinflussen!

Was ist transform?

transform wendet 2D oder 3D Transformationen auf ein Element an:

✅ Sehr performant (GPU-beschleunigt)
✅ Beeinflusst nicht das Layout (andere Elemente bleiben wo sie sind)
✅ Perfekt mit Transitions kombinierbar
✅ Mehrere Transformationen gleichzeitig möglich

translate() - Verschieben

Elemente verschieben ohne position oder margin:

translate - Verschieben

/* Horizontal verschieben */
.move-right {
    transform: translateX(50px);  /* 50px nach rechts */
}

.move-left {
    transform: translateX(-50px);  /* 50px nach links */
}

/* Vertikal verschieben */
.move-down {
    transform: translateY(30px);  /* 30px nach unten */
}

.move-up {
    transform: translateY(-30px);  /* 30px nach oben */
}

/* Beides gleichzeitig */
.move-diagonal {
    transform: translate(50px, 30px);
    /* X: 50px rechts, Y: 30px runter */
}

/* Mit Prozent (relativ zur eigenen Größe) */
.center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* Perfekte Zentrierung! */
}

Wann nutzen?

✅ Hover-Effekte (Button nach oben)
✅ Perfekte Zentrierung
✅ Slide-In Animationen
✅ Besser als top/left (Performance!)

scale() - Skalieren

Größe ändern ohne width/height:

scale - Skalieren

/* Gleichmäßig skalieren */
.bigger {
    transform: scale(1.5);  /* 150% größer */
}

.smaller {
    transform: scale(0.5);  /* 50% kleiner */
}

/* Horizontal & vertikal separat */
.wide {
    transform: scaleX(2);  /* Doppelt so breit */
}

.tall {
    transform: scaleY(1.5);  /* 1.5x höher */
}

/* Beides unterschiedlich */
.custom {
    transform: scale(2, 0.5);
    /* X: 2x breiter, Y: 0.5x höher */
}

/* Spiegeln mit negativen Werten */
.mirror-x {
    transform: scaleX(-1);  /* Horizontal gespiegelt */
}

.mirror-y {
    transform: scaleY(-1);  /* Vertikal gespiegelt */
}

Wann nutzen?

✅ Zoom beim Hover
✅ Bounce-Animationen
✅ Spiegeln von Bildern/Icons
✅ Besser als width/height animieren!

rotate() - Drehen

Elemente rotieren:

rotate - Drehen

/* In Grad */
.rotate-45 {
    transform: rotate(45deg);  /* 45° im Uhrzeigersinn */
}

.rotate-neg {
    transform: rotate(-90deg);  /* 90° gegen Uhrzeigersinn */
}

/* Volle Drehung */
.full-circle {
    transform: rotate(360deg);
}

/* Für Animationen perfekt */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.spinner {
    animation: spin 2s linear infinite;
}

Wann nutzen?

✅ Loading-Spinner
✅ Dekorative Effekte
✅ Pfeile drehen (Accordions)
✅ Karten umdrehen

skew() - Verzerren

Elemente schräg verzerren:

skew - Verzerren

/* Horizontal verzerren */
.skew-x {
    transform: skewX(20deg);  /* Kippt nach rechts */
}

.skew-x-neg {
    transform: skewX(-20deg);  /* Kippt nach links */
}

/* Vertikal verzerren */
.skew-y {
    transform: skewY(10deg);
}

/* Beides gleichzeitig */
.skew-both {
    transform: skew(20deg, 10deg);
    /* X: 20deg, Y: 10deg */
}

Wann nutzen?

✅ Kreative Designs
✅ Parallax-Effekte
⚠️ Sparsam einsetzen (kann unleserlich werden!)

Mehrere Transforms kombinieren

Wichtig: Mehrere Transformationen in einer transform-Property:

Kombinierte Transforms

/* ❌ FALSCH - Nur letzte wirkt! */
.element {
    transform: translateX(50px);
    transform: rotate(45deg);  /* Überschreibt translateX! */
}

/* ✅ RICHTIG - Alle in einer Zeile */
.element {
    transform: translateX(50px) rotate(45deg);
    /* Verschiebt UND dreht */
}

/* Komplexes Beispiel */
.complex {
    transform: translate(50px, 20px) rotate(45deg) scale(1.2);
    /* Verschiebt, dreht, und vergrößert */
}

Reihenfolge wichtig!

Reihenfolge der Transforms

/* Unterschiedliche Ergebnisse */

/* 1. Erst verschieben, dann drehen */
.order-1 {
    transform: translateX(100px) rotate(45deg);
}

/* 2. Erst drehen, dann verschieben */
.order-2 {
    transform: rotate(45deg) translateX(100px);
    /* Element wird in gedrehter Richtung verschoben! */
}

transform-origin - Drehmittelpunkt

Von wo aus soll transformiert werden?

transform-origin

/* Standard: center center */
.center {
    transform-origin: center center;  /* Mitte (Standard) */
    transform: rotate(45deg);
}

/* Oben links */
.top-left {
    transform-origin: top left;
    transform: rotate(45deg);
    /* Dreht um obere linke Ecke */
}

/* Unten rechts */
.bottom-right {
    transform-origin: bottom right;
    transform: rotate(45deg);
}

/* Mit Pixeln */
.custom {
    transform-origin: 50px 50px;
    transform: rotate(45deg);
}

/* Mit Prozent */
.percent {
    transform-origin: 75% 25%;
    transform: scale(1.5);
}

Keywords:

center (Standard)
top, bottom
left, right
Kombinationen: top left, bottom right, etc.

3D Transforms

Dreidimensionale Transformationen:

perspective - Tiefe

perspective - 3D-Tiefe

/* Am Container */
.container {
    perspective: 1000px;  /* Betrachtungsabstand */
}

.card {
    transform: rotateY(45deg);
    /* Dreht sich um Y-Achse */
}

Oder direkt am Element:

perspective() Funktion

.element {
    transform: perspective(1000px) rotateY(45deg);
}

rotate3d - 3D Rotation

3D Rotations

/* Um X-Achse (horizontal) */
.rotate-x {
    transform: rotateX(45deg);
    /* Kippt nach vorne/hinten */
}

/* Um Y-Achse (vertikal) */
.rotate-y {
    transform: rotateY(45deg);
    /* Kippt nach links/rechts */
}

/* Um Z-Achse (wie normale rotate) */
.rotate-z {
    transform: rotateZ(45deg);
    /* = rotate(45deg) */
}

/* Um eigene Achse */
.rotate-3d {
    transform: rotate3d(1, 1, 0, 45deg);
    /* X:1, Y:1, Z:0, Winkel:45deg */
}

translate3d - 3D Verschiebung

3D translate

/* X, Y, Z */
.translate-3d {
    transform: translate3d(50px, 30px, 100px);
    /* X:50px, Y:30px, Z:100px näher */
}

/* Nur Z-Achse */
.translate-z {
    transform: translateZ(50px);
    /* 50px näher zum Betrachter */
}

scale3d - 3D Skalierung

3D scale

.scale-3d {
    transform: scale3d(1.5, 1.5, 2);
    /* X:1.5, Y:1.5, Z:2 */
}

.scale-z {
    transform: scaleZ(2);
}

Praktische Beispiele

Beispiel 1: Hover Button

Button mit Lift-Effekt

.button {
    padding: 12px 24px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
}

.button:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0, 123, 255, 0.3);
}

.button:active {
    transform: translateY(-2px);
}

Beispiel 2: Card Flip

3D Card Flip

.card-container {
    perspective: 1000px;
    width: 300px;
    height: 400px;
}

.card {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.6s;
}

.card-container:hover .card {
    transform: rotateY(180deg);
}

.card-front,
.card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 12px;
    padding: 20px;
}

.card-front {
    background-color: white;
}

.card-back {
    background-color: #007bff;
    color: white;
    transform: rotateY(180deg);
}

Beispiel 3: Zoom on Hover

Image Zoom

.image-container {
    overflow: hidden;
    border-radius: 12px;
}

.image {
    width: 100%;
    transition: transform 0.3s ease-out;
}

.image-container:hover .image {
    transform: scale(1.1);
}

Beispiel 4: Loading Spinner

Rotating Spinner

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.spinner {
    width: 50px;
    height: 50px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #007bff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

Beispiel 5: Parallax Effect

Parallax Scroll

/* Mit JavaScript */
window.addEventListener('scroll', () => {
    const scrolled = window.pageYOffset;
    const parallax = document.querySelector('.parallax');
    parallax.style.transform = `translateY(${scrolled * 0.5}px)`;
});

/* CSS */
.parallax {
    transition: transform 0.1s;
}

Beispiel 6: Slide-In Animation

Slide In from Left

@keyframes slide-in {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.slide-in {
    animation: slide-in 0.5s ease-out;
}

backface-visibility

Rückseite verstecken:

backface-visibility

.card {
    backface-visibility: hidden;
    /* Rückseite unsichtbar beim Drehen */
}

/* Nützlich für Card-Flips */
.card-front {
    backface-visibility: hidden;
}

.card-back {
    backface-visibility: hidden;
    transform: rotateY(180deg);
}

transform-style

3D-Kontext für Kinder:

transform-style

.container {
    transform-style: preserve-3d;
    /* Kinder behalten 3D-Position */
}

/* Standard */
.flat {
    transform-style: flat;
    /* Kinder werden flach gerendert */
}

Performance-Tipps

✅ Performant:

GPU-beschleunigt

/* SEHR SCHNELL - GPU */
.fast {
    transform: translate3d(0, 0, 0);
    /* Aktiviert GPU, selbst bei 0! */
}

/* Oder */
.fast {
    transform: translateZ(0);
    will-change: transform;
}

Performante Transforms:

✅ translate3d() / translateZ(0) - Aktiviert GPU
✅ translate(), scale(), rotate()
✅ Besser als top, left, width, height!

will-change - Vorab optimieren

will-change

/* Browser vorbereiten */
.element {
    will-change: transform;
    /* Nur wenn wirklich nötig! */
}

/* Nach Animation entfernen */
.element.animated {
    will-change: transform;
}

.element.animation-done {
    will-change: auto;
}

Vorsicht: Nicht überall nutzen (Speicher-Overhead)!

Best Practices

✅ DO:

transform statt position/width/height für Animationen
translate3d() oder translateZ(0) für GPU
Mehrere Transforms in einer Property
Reihenfolge beachten bei kombinierten Transforms
transform-origin setzen wenn nötig
backface-visibility: hidden für Flips

❌ DON'T:

Nicht mehrere transform-Properties (nur letzte wirkt)
Nicht will-change überall (nur wo nötig)
Nicht transform für Layout (nur visuelle Effekte)
Nicht skew() übertreiben (Lesbarkeit!)
Nicht ohne Fallback bei 3D (ältere Browser)

Matrix - Advanced

Alle Transforms in einer Matrix:

matrix()

/* Alle Transforms = Matrix */
.element {
    transform: matrix(1, 0, 0, 1, 50, 30);
    /* = translate(50px, 30px) */
}

/* Meist nicht direkt nutzen */
/* Browser berechnet automatisch */

Info: Browser konvertiert alle Transforms zu Matrix. Manuell meist nicht nötig!

📝 Quiz

Warum ist transform besser als top/left für Animationen?

transform ist modernertransform ist GPU-beschleunigt und performantertransform funktioniert in mehr BrowsernKein Unterschied

📝 Quiz

Was macht transform: translate(-50%, -50%)?

Verschiebt um 50pxVerschiebt um 50% der Container-BreiteVerschiebt um 50% der eigenen Größe (perfekt für Zentrierung)Verkleinert auf 50%

⚡

Tipps & Tricks

Perfekte Zentrierung mit Transform

Zentriere Elemente unabhängig von ihrer Größe:

.centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

Vorteil: Funktioniert ohne width oder height zu kennen!

3D Flip Card Effect

Erstelle eindrucksvolle Flip-Karten:

.card {
    perspective: 1000px;
}

.card-inner {
    position: relative;
    width: 100%;
    height: 300px;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

.card:hover .card-inner {
    transform: rotateY(180deg);
}

.card-front, .card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
}

.card-back {
    transform: rotateY(180deg);
}

Smooth Hover Effects

Kombiniere mehrere Transforms für interessante Effekte:

.button {
    transition: transform 0.3s ease-out;
}

.button:hover {
    transform: translateY(-2px) scale(1.05);
}

.card:hover {
    transform: translateY(-8px) rotate(-1deg);
}

Transform Origin für Animations

Kontrolliere den Rotations-/Scale-Punkt:

/* Von links klappen */
.menu {
    transform-origin: left center;
    transform: scaleX(0);
}

.menu.open {
    transform: scaleX(1);
}

/* Herz schlägt von der Mitte */
.heart {
    transform-origin: center;
    animation: heartbeat 1s infinite;
}

@keyframes heartbeat {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

Übungsaufgaben

Aufgabe 1: Hover Button

Erstelle einen Button mit:

translateY(-4px) beim Hover
scale(0.95) beim Active
Smooth Transition

Aufgabe 2: Card Flip

Erstelle eine Card die sich umdreht:

3D-Flip mit rotateY
Vorder- und Rückseite
backface-visibility: hidden

Aufgabe 3: Image Gallery

Erstelle eine Galerie mit:

Scale(1.1) beim Hover
rotate(5deg) für Polaroid-Effekt
Smooth Transitions

Nächste Schritte

Du kennst jetzt:

✅ translate(), scale(), rotate(), skew()
✅ Kombinierte Transforms
✅ transform-origin
✅ 3D Transforms (perspective, rotateX/Y/Z)
✅ Performance mit GPU
✅ Praktische Anwendungen

Als Nächstes lernst du:

Media Queries (Responsive Design)
CSS Variables (Custom Properties)
Pseudo-Classes & Pseudo-Elements

Weiter so! 🚀

CSS Transforms - rotate, scale, translate & mehr

CSS Transforms - Elemente bewegen & transformieren

Was ist transform?

translate() - Verschieben

scale() - Skalieren

rotate() - Drehen

skew() - Verzerren

Mehrere Transforms kombinieren

transform-origin - Drehmittelpunkt

3D Transforms

perspective - Tiefe

rotate3d - 3D Rotation

translate3d - 3D Verschiebung

scale3d - 3D Skalierung

Praktische Beispiele

Beispiel 1: Hover Button

Beispiel 2: Card Flip

Beispiel 3: Zoom on Hover

Beispiel 4: Loading Spinner

Beispiel 5: Parallax Effect

Beispiel 6: Slide-In Animation

backface-visibility

transform-style

Performance-Tipps

✅ Performant:

will-change - Vorab optimieren

Best Practices

✅ DO:

❌ DON'T:

Matrix - Advanced

📝 Quiz

📝 Quiz

Tipps & Tricks

Perfekte Zentrierung mit Transform

3D Flip Card Effect

Smooth Hover Effects

Transform Origin für Animations

Übungsaufgaben

Nächste Schritte

Gut gemacht! 🎉

Artikel bewerten

Das könnte dich auch interessieren

CSS Backgrounds & Borders - Hintergründe & Rahmen stylen

CSS Basics - Deine Seite gestalten

CSS Box Model - margin, padding, border verstehen