Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

transform

Dieser Artikel benötigt eine redaktionelle Überprüfung. So können Sie helfen.

Dies ist eine experimentelle Technologie
Da diese Technologie noch nicht definitiv implementiert wurde, sollte die Browser Kompatibilität beachtet werden. Es ist auch möglich, dass der Syntax in einer späteren Spezifikation noch geändert wird.

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
Animierbarja, als Transformation
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> )

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

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Grundunterstützung

(Ja) -webkit
36

3.5 (1.9.1)-moz
16.0 (16.0)
9.0 -ms
10.0

10.5-o
12.10
15.0-webkit
23

3.1-webkit
3D-Unterstützung

12.0-webkit
36
 

10.0-moz
16.0 (16.0)
10.0 15.0-webkit
23
4.0-webkit
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Grundunterstützung 2.1-webkit (Ja)-webkit (Ja) (Ja) 11.5 (Ja)-webkit 3.2 (Ja)-webkit
3D-Unterstützung 3.0-webkit (Ja)-webkit (Ja) (Ja) 22 (Ja)-webkit 3.2 (Ja)-webkit

Bemerkungen

Internet Explorer 5.5 oder neuer unterstützt einen geschützten Matrizenfilter, der benutzt werden kann, um einen ähnlichen Effekt zu erzielen.

Gecko 14.0 hat die experimentelle Unterstützung von skew() entfernt, wurde aber in Gecko 15.0 wegen Kompatibilitätsgründen wiedereingeführt. Weil es kein Standard ist, wird es in der Zukunft aber wieder entfernt werden. Bitte nicht benutzen.

Android 2.3 hat einen Bug, bei dem Eingabeformulare "springen", wenn getippt wird, wenn irgendein beinhaltetes div eine -webkit-transform Eigenschaft hat.

Außerdem ansehen

Schlagwörter des Dokuments und Mitwirkende

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