CSS Transform Generator

Einstellungen

Vorschau & CSS

 
   
 
 
   
 
 
 
So wird's verwendet
 
     
  1. Drehen — Den Rotationsregler ziehen oder einen Gradwert eingeben, um das Element um seinen Ursprung zu drehen.
    2.  
  2. Skalieren — X- und Y-Skalierung unabhängig anpassen, um das Element zu strecken, zu verkleinern oder zu spiegeln.
    3.  
  3. Verschieben — Das Element horizontal und vertikal verschieben, ohne den Dokumentfluss zu beeinflussen.
    4.  
  4. CSS kopieren — Auf „CSS kopieren" klicken, um die fertige transform-Deklaration zu erhalten.
    5.  
 
 
 
Was ist CSS transform?
 
CSS transform ermöglicht das Drehen, Skalieren, Verzerren und Verschieben von Elementen im 2D- oder 3D-Raum. Im Gegensatz zur Positionierung beeinflusst transform das Layout der umgebenden Elemente nicht.
 
Transforms werden GPU-composited verarbeitet, was sie ideal für Animationen und Übergänge macht. Mehrere Funktionen in einer transform-Eigenschaft werden von rechts nach links angewendet.
 
 
 
Häufige Anwendungsfälle
 
 
Button-Hover-Animationen
 
Karten-Flip-Effekte
 
Rotierende Icons
 
Diagonale Abschnittstrenner
 
Zoom-in-Bild-Hover
 
Tooltip-Positionierung
 
Parallax-Ebenenversätze
 
Gespiegelte Elemente
 
 
Tipps & Best Practices
 
 
 transform-origin festlegen 
Standardmäßig beginnen Transforms vom Mittelpunkt des Elements. Mit transform-origin lässt sich ein Eck oder benutzerdefinierter Punkt als Ursprung wählen.
 
 
 transform statt position bevorzugen 
Die Animation von transform ist wesentlich günstiger als die Animation von top/left, da keine Layout-Neuberechnung nötig ist.
 
 
 Reihenfolge beachten 
rotate(45deg) scale(2) ergibt ein anderes Ergebnis als scale(2) rotate(45deg). Die rechteste Funktion wird zuerst angewendet.
 
 
 3D-Transforms 
perspective zum Elternelement hinzufügen und rotateX/rotateY für realistische 3D-Kartenflips und Würfeleffekte verwenden.
 
 
 
Häufig gestellte Fragen
 
 
Beeinflusst transform das Seitenlayout?
 
Nein. Transformierte Elemente nehmen ihren ursprünglichen Platz im Dokumentfluss ein. Andere Elemente fließen nicht neu, wenn ein Transform angewendet wird.
 
 
 
Kann ich CSS-Transforms animieren?
 
Ja. transition: transform 0.3s ease; für Hover-Effekte oder @keyframes für Endlosanimationen verwenden. Transforms gehören zu den leistungsfähigsten CSS-Eigenschaften für Animationen.
 
 
 
Was ist der Unterschied zwischen translate und position?
 
translate verschiebt ein Element visuell, ohne das Layout zu beeinflussen. position: relative mit top/left verschiebt es ebenfalls, kann aber bei Animationen Layout-Neuberechnungen auslösen.
 
 
 
Wie spiegele ich ein Element horizontal?
 
transform: scaleX(-1); für horizontale Spiegelung oder scaleY(-1) für vertikale Spiegelung verwenden.