transform

von 1 Mitwirkenden:

Dieser Artikel benötigt eine redaktionelle Überprüfung.

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.

  • Initialwert none
  • Anwendbar auf transformierbare Elemente
  • Vererbt Nein
  • Prozentwerte bezieht sich auf die Grösse der äusseren Box
  • Medium visuell
  • Berechneter Wert wie angegeben; relative Angaben werden in absolute konvertiert
  • Animierbar Ja, als Transformation
  • Kanonische Reihenfolge die einzige nicht missverständliche Reihenfolge definiert durch die formale Grammatik

Syntax

Formal syntax: none | <transform-function>+
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: MatzeMarcel
Zuletzt aktualisiert von: MatzeMarcel,