CSS-Transformationsgenerator für faule Leute.
Stellen Sie den Maßstab ein, drehen, verschieben und neigen Sie und sehen Sie sich die Live-Vorschau an, um die gewünschte Ansicht zu erhalten.
Vermeiden Sie das Festlegen von Extremwerten für die Neigungseigenschaft, da die Vorschau möglicherweise das Einstellungsfeld abdeckt. In diesem Fall müssen Sie die Seite aktualisieren.
Skalieren, drehen, verschieben und neigen
Die Skalierung funktioniert so, als würden Sie das Zielelement vergrößern und verkleinern. Der Standardmaßstabswert ist 1, der als Multiplikator der Originalgröße dient. Dies bedeutet, dass 0,5 die Sektion halbiert, während 2 die Sektion verdoppelt.
Drehen Sie das Element im Uhrzeigersinn mit der zweiten Eigenschaft, die in Grad festgelegt wird. Beim Drehen mit 180° wird das Objekt auf den Kopf gestellt, während 360°-Aufnahmen wieder in seine ursprüngliche aufrechte Position zurückkehren. Legen Sie einen beliebigen positiven oder negativen Wert oder sogar Dezimalstellen fest.
Übersetzen verschiebt das Element mit Pixeln bezogen auf seine ursprüngliche Position. Der X-Wert horizontal und Y vertikal, wenn das Rotationsattribut null ist.
Neigen Sie die Objekte um ihre horizontale (X) oder vertikale (Y) Achse.
CSS-Transformation erklärt
Mit der CSS-Eigenschaft transformieren können Sie ein Element drehen, skalieren, neigen und verschieben. Es ändert den Koordinatenraum des visuellen CSS-Formatierungsmodells.
Definition und Verwendung
Die Eigenschaft transform wendet eine 2D- oder 3D-Transformation auf ein Element an. Mit dieser Eigenschaft können Sie Elemente drehen, skalieren, verschieben, neigen usw.
Browser-Unterstützung
Die Zahlen in der Tabelle geben die erste Browserversion an, die die Eigenschaft vollständig unterstützt.
Zahlen gefolgt von -webkit-, -moz- oder -o- geben die erste Version an, die mit einem Präfix funktioniert hat.
Syntax
transform: none|transform-functions|initial|inherit;
