Zusammenfassung

Mit der CSS transform Eigenschaft kann man den Koordinatenraum des visuellen CSS-Formatierungsmodell verändern. Durch dessen Benutzen können Elemente verändert, gedreht, skaliert und geschert werden, indem die Werte gesetzt werden.

Wenn die Eigenschaft einen anderen Wert als none hat, wird ein Stackinhalt erstellt. In diesem Fall verhält sich das Objekt wie ein Block für position: fixed Elemente, der sie beinhalten.

Initialwertnone
Anwendbar auftransformierbare Elemente
VererbtNein
Prozentwertebezieht sich auf die Größe der äußeren Box
Medienvisuell
Berechneter Wertrelativ zur gleichen Achse der Innenabstandsbox des Scrollcontainers
AnimationstypTransformation
Kanonische Reihenfolgedie eindeutige Reihenfolge definiert durch die formale Grammatik
Erstellt StapelkontextJa

Syntax

Formal syntax: none | <transform-list>

wobei
<transform-list> = <transform-function>+

wobei
<transform-function> = <matrix()> | <translate()> | <translateX()> | <translateY()> | <scale()> | <scaleX()> | <scaleY()> | <rotate()> | <skew()> | <skewX()> | <skewY()> | <matrix3d()> | <translate3d()> | <translateZ()> | <scale3d()> | <scaleZ()> | <rotate3d()> | <rotateX()> | <rotateY()> | <rotateZ()> | <perspective()>

wobei
<matrix()> = matrix( <number> [, <number> ]{5,5} )
<translate()> = translate( <length-percentage> [, <length-percentage> ]? )
<translateX()> = translateX( <length-percentage> )
<translateY()> = translateY( <length-percentage> )
<scale()> = scale( <number> [, <number> ]? )
<scaleX()> = scaleX( <number> )
<scaleY()> = scaleY( <number> )
<rotate()> = rotate( <angle> )
<skew()> = skew( <angle> [, <angle> ]? )
<skewX()> = skewX( <angle> )
<skewY()> = skewY( <angle> )
<matrix3d()> = matrix3d( <number> [, <number> ]{15,15} )
<translate3d()> = translate3d( <length-percentage> , <length-percentage> , <length> )
<translateZ()> = translateZ( <length> )
<scale3d()> = scale3d( <number> , <number> , <number> )
<scaleZ()> = scaleZ( <number> )
<rotate3d()> = rotate3d( <number> , <number> , <number> , <angle> )
<rotateX()> = rotateX( <angle> )
<rotateY()> = rotateY( <angle> )
<rotateZ()> = rotateZ( <angle> )
<perspective()> = perspective( <length> )

wobei
<length-percentage> = <length> | <percentage>

transform: none
transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0)
transform: translate(12px, 50%)
transform: translateX(2em)
transform: translateY(3in)
transform: scale(2, 0.5)
transform: scaleX(2)
transform: scaleY(0.5)
transform: rotate(0.5turn)
transform: skewX(30deg)
transform: skewY(1.07rad)
transform: matrix3d(1.0, 2.0, 3.0, 4.0, 5.0, 6.0, 7.0, 8.0, 9.0, 10.0, 11.0, 12.0, 13.0, 14.0, 15.0, 16.0)
transform: translate3d(12px, 50%, 3em)
transform: translateZ(2px)
transform: scale3d(2.5, 1.2, 0.3)
transform: scaleZ(0.3)
transform: rotate3d(1, 2.0, 3.0, 10deg)
transform: rotateX(10deg)
transform: rotateY(10deg)
transform: rotateZ(10deg)
transform: perspective(17px)

transform: translateX(10px) rotate(10deg) translateY(5px)

Werte

<transform-function>
Eine oder mehrere der CSS transform functions sollten angewendet werden (siehe unten).
none
Gibt an, dass keine Veränderungsfunktion verwendet werden soll.

Examples

Siehe Benutzen von CSS transforms.

Beispiel

pre {
     width: 33em;
     border: solid red;

    -webkit-transform: translate(100px) rotate(20deg);
    -webkit-transform-origin: 60% 100%;

    -o-transform:translate(100px) rotate(20deg); 
    -o-transform-origin:60% 100%;

    transform: translate(100px) rotate(20deg);
    transform-origin: 60% 100%;
}

CSS transform-Funktionen

Die transform CSS Eigenschaft erlaubt einem, das Koordinatensystem, welches von einem Element benutzt wird, zu manipulieren, indem man die transform-Funktionen benutzt. Diese Funktionen werden unten beschrieben.

matrix

transform:  matrix(a, c, b, d, tx, ty)

Gibt eine 2D-Transformations-Matrix an, die durch sechs Werte spezifiziert wird. Das ist gleichbedeutend mit den Benutzen der Transformationsmatrix (abtxcdty001) \begin{pmatrix} a & b & \mathrm{tx} \\ c & d & \mathrm{ty} \\ 0 & 0 & 1 \end{pmatrix} die von einem neuen Koordinatensystem in ein früheres Koordinatensystem umwandelt, indem es die folgenden gleichbedeutenden Matrizen benutzt: (xSystemVorherySystemVorher1)=(abtxcdty001)(xSystemNeuySystemNeu1)=(axSystemNeu+bySystemNeu+txcxSystemNeu+dySystemNeu+ty1) \begin{pmatrix} x_{\mathrm{prevCoordSys}} \\ y_{\mathrm{prevCoordSys}} \\ 1 \end{pmatrix} = \begin{pmatrix} a & b & \mathrm{tx} \\ c & d & \mathrm{ty} \\ 0 & 0 & 1 \end{pmatrix} \begin{pmatrix} x_{\mathrm{newCoordSys}} \\ y_{\mathrm{newCoordSys}} \\ 1 \end{pmatrix} = \begin{pmatrix} a x_{\mathrm{newCoordSys}} + b y_{\mathrm{newCoordSys}} + \mathrm{tx} \\ c x_{\mathrm{newCoordSys}} + d y_{\mathrm{newCoordSys}} + \mathrm{ty} \\ 1 \end{pmatrix}

Notiz: Ältere Versionen von Gecko (Firefox) akzeptieren einen <length> Wert für tx und ty. Zurzeit unterstützt Gecko, ebenso wie Webkit (Safari, Chrome) und Opera ein einheitsloses <number> für tx und ty.

Beispiele

 background: gold;  width: 30em;

 -webkit-transform: matrix(1, -0.2, 0, 1, 0, 0);
      -o-transform: matrix(1, -0.2, 0, 1, 0, 0);
         transform: matrix(1, -0.2, 0, 1, 0, 0);
 background: wheat;
 max-width: intrinsic;

 -webkit-transform: matrix(1, 0, 0.6, 1,  250, 0);
      -o-transform: matrix(1, 0, 0.6, 1,  250, 0);
         transform: matrix(1, 0, 0.6, 1,  250, 0);

Weiteres Wissen

rotate

transform:  rotate(angle);       /* ein <Winkel>, z.B., rotate(30deg) */

Dreht das Element im Uhrzeigersinn um seinen Ursprungspunkt (der durch die transform-origin Eigenschaft festgelegt ist) um den angegebenen Winkel(angle). Die Operation korrespondiert zur Matrix [cos(angle) sin(angle) -sin(angle) cos(angle) 0 0].

scale

transform:  scale(sx[, sy]);     /* eine oder zwei einheitslose <Zahl>en, z.B., scale(2.1,4) */

Definiert eine 2D-Skalierungsoperation, die durch [sx, sy] beschrieben wird. Wenn sy nicht angegeben ist, wird angenommen, es sei gleich sx.

scaleX

transform:  scaleX(sx);          /* eine einheitslose <Zahl>, z.B., scaleX(2.7) */

Gibt eine Skalierungsoperation durch den Vektor [sx, 1] an.

scaleY

transform:  scaleY(sy)           /* eine einheitslose <Zahl>, z.B., scaleY(0.3) */

Gibt eine Skalierungsoperation durch den Vektor [1, sy] an.

skew

transform:  skew(ax[, ay])       /* ein oder zwei <Winkel>, z.B., skew(30deg,-10deg) */

Schert das Element entlang der X- und Y-Achsen durch die angegebenen Winkel. Wenn ay nicht angegeben ist, wird keine Scherung auf die Y-Achse angewendet.

Notiz: Die skew() Funktion war in frühen Versionen da. Sie wurde entfernt aber ist immer noch präsent in einigen Implementationen. Bitte nicht mehr benutzen!

Um den selben Effekt zu erzielen, kann man skewX() benutzen, wenn du skew()mit einem Parameter oder matrix(1, tan(ay), tan(ax), 1, 0, 0) für den normalen Weg genutzt hast. Beachte, dass tan() keine CSS-Funktion ist und du den Wert selbst berechnen musst.

skewX

transform:  skewX(angle)         /* ein <Winkel>, z.B., skewX(-30deg) */

Schert das Element entlang der X-Achse um den gegebenen Winkel (angle).

skewY

transform:  skewY(angle)         /* ein <Winkel>, z.B., skewY(4deg) */

Schert das Element entlang der Y-Achse um den gegebenen Winkel (angle).

translate

transform:  translate(tx[, ty])  /* ein oder zwei <Veränderungswert>e */

Gibt eine 2D-Veränderung über den Vektor [tx, ty] an. Wenn ty nicht angegeben ist, wird angenommen, dass der Wert null sei.

Alle <Veränderungswert>argumente sind entweder <Länge>nwerte oder <Prozent>werte.

translateX

transform:  translateX(tx)       /* <Veränderungswert> */

Verändert das Element mit dem gegebenen Betrag über der X-Achse.

translateY

transform:  translateY(ty)       /* <Veränderungswert> */

Verändert das Element mit dem gegebenen Betrag über der Y-Achse.

Spezifikationen

Specifikation Status Kommentar
CSS Transforms Level 1
Die Definition von 'transform' in dieser Spezifikation.
Arbeitsentwurf  

Browserkompatibilität

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid WebviewChrome für AndroidEdge MobileFirefox für AndroidOpera für AndroidSafari auf iOSSamsung Internet
Grundlegende UnterstützungChrome Vollständige Unterstützung 36
Vollständige Unterstützung 36
Vollständige Unterstützung Ja
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Edge Vollständige Unterstützung 12
Mit Präfix
Vollständige Unterstützung 12
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Firefox Vollständige Unterstützung 16
Vollständige Unterstützung 16
Vollständige Unterstützung 49
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Vollständige Unterstützung 44
Mit Präfix Deaktiviert
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Deaktiviert From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Vollständige Unterstützung 10
Hinweise
Vollständige Unterstützung 10
Hinweise
Hinweise Internet Explorer does not support the global values initial and unset.
Vollständige Unterstützung 11
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Vollständige Unterstützung 9
Mit Präfix Hinweise
Mit Präfix Benötigt das Herstellerpräfix: -ms-
Hinweise Internet Explorer 5.5 or later supports a proprietary Matrix Filter which can be used to achieve a similar effect.
Opera Vollständige Unterstützung 12.1
Vollständige Unterstützung 12.1
Vollständige Unterstützung 15
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Keine Unterstützung 10.5 — 15
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -o-
Safari Vollständige Unterstützung 9
Vollständige Unterstützung 9
Vollständige Unterstützung 3.1
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
WebView Android Vollständige Unterstützung 2
Mit Präfix Hinweise
Vollständige Unterstützung 2
Mit Präfix Hinweise
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Hinweise Android 2.3 has a bug where input forms will "jump" when typing, if any container element has a -webkit-transform.
Chrome Android Vollständige Unterstützung Ja
Mit Präfix
Vollständige Unterstützung Ja
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Edge Mobile Vollständige Unterstützung Ja
Mit Präfix
Vollständige Unterstützung Ja
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Firefox Android Vollständige Unterstützung 16
Vollständige Unterstützung 16
Vollständige Unterstützung 49
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Vollständige Unterstützung 44
Mit Präfix Deaktiviert
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Deaktiviert From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Vollständige Unterstützung 11.5
Mit Präfix
Vollständige Unterstützung 11.5
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Safari iOS Vollständige Unterstützung 9
Vollständige Unterstützung 9
Vollständige Unterstützung 3.2
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Samsung Internet Android Vollständige Unterstützung Ja
3D supportChrome Vollständige Unterstützung 12Edge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 10IE Vollständige Unterstützung 10
Hinweise
Vollständige Unterstützung 10
Hinweise
Hinweise Internet Explorer 9.0 or earlier has no support for 3D transforms. Mixing 3D and 2D transform functions, such as -ms-transform:rotate(10deg) translateZ(0);, will prevent the entire property from being applied.
Opera Vollständige Unterstützung 15Safari Vollständige Unterstützung 4WebView Android Vollständige Unterstützung 3
Mit Präfix
Vollständige Unterstützung 3
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Chrome Android Vollständige Unterstützung JaEdge Mobile Vollständige Unterstützung JaFirefox Android Vollständige Unterstützung JaOpera Android Vollständige Unterstützung 22Safari iOS Vollständige Unterstützung 3.2Samsung Internet Android Vollständige Unterstützung Ja

Legende

Vollständige Unterstützung  
Vollständige Unterstützung
Siehe Implementierungshinweise.
Siehe Implementierungshinweise.
Benutzer muss dieses Feature explizit aktivieren.
Benutzer muss dieses Feature explizit aktivieren.
Benötigt ein Herstellerpräfix oder einen anderen Namen zur Verwendung.
Benötigt ein Herstellerpräfix oder einen anderen Namen zur Verwendung.

Siehe auch

Schlagwörter des Dokuments und Mitwirkende

Mitwirkende an dieser Seite: SJW, wilmaedd, Sebastianz, fscholz, MatzeMarcel
Zuletzt aktualisiert von: SJW,