transform

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.

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 $$\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: $$\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}$$

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

• Beispiel einer normalen SVG-Transformation
• Beispiel linearer Transformationsmatrizen Wikipedia
• Koordinationstransformationsmatrizen mathamazement.com
• Microsoft's Matrizenfilter MSDN

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.

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

Browserkompatibilität

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

• Benutzen von CSS-Transforms
• <Veränderungswert> Datentyp
• Mehr Informationen über CSS3-Rotationen / Matrizenfiltern in den Kommentaren auf Paul Irish's Blog.
• Ein browserübergreifendes 2D-Transform-Plugin für jQuery