(0) exportieren Drucken
Alle erweitern

Transformationen

Internet Explorer 10 und Windows Store-Apps mit JavaScript für Windows 8 bieten jetzt Unterstützung für CSS3-3D-Transformationen (Cascading Stylesheets, Level 3). Seit Windows Internet Explorer 9 werden CSS3-2D-Transformationen unterstützt, die auch von Windows Store-Apps mit JavaScript unterstützt werden. Transformationen ermöglichen das Übersetzen, Drehen und Skalieren von Elementen im 2D- und 3D-Raum ohne Plug-In. CSS3- 3D-Transformationen sind vom W3C (World Wide Web Consortium) in den Spezifikationen für CSS-3D-Transformationen, definiert, die sich derzeit in der Arbeitsentwurfsphase befinden.

Hinweis  Sie sollten sich zunächst mit der Transformation von Koordinationssystemen und dem Rendering vertraut machen, bevor Sie 3D-Transformationen manuell angeben.

Hinweis  Die in diesem Thema beschriebenen Eigenschaften benötigten früher das Microsoft-spezifische Herstellerpräfix "-ms-", damit sie in Internet Explorer 10 und Windows Store-Apps mit JavaScript funktionierten. Dieses Präfix ist nicht mehr erforderlich, es wird aber noch erkannt. Um die Kompatibilität auch in Zukunft zu gewährleisten, sollten Apps, bei denen die Transformationseigenschaften mit einem Microsoft-spezifischen Präfix verwendet werden, aktualisiert werden.

Die transform-Eigenschaft

Sie wenden sowohl 2D- als auch 3D-Transformationen mithilfe der transform-Eigenschaft, die eine Liste von Transformationsfunktionen enthält, auf ein Element an. Die Eigenschaftensyntax lautet wie folgt:

EigenschaftBeschreibung

transform

Gibt die Transformationsfunktionen (die im folgenden Abschnitt aufgelistet werden) an, die auf das angegebene Element angewendet werden können. Die transform-Eigenschaft kann auf eine durch Leerzeichen getrennte Liste von Transformationsfunktionen oder auf das none-Schlüsselwort festgelegt werden, das angibt, dass keine Transformationsfunktionen angewendet werden sollen.

 

Unterstützte Transformationsfunktionen

Die folgende Liste enthält die in Internet Explorer 10 und in Windows Store-Apps mit JavaScript für Windows 8 unterstützte Transformationsfunktionen. Auf jede Funktion folgt ein kurzes Markupbeispiel und eine Abbildung zur Erläuterung der Ergebnisse des Beispiels. (Informationen zum Anzeigen der unterstützten 2D-Transformationsfunktionen finden Sie unter Transformationsfunktionen.)

Beachten Sie unbedingt die Reihenfolge. Transformationsfunktionen werden in der Reihenfolge angewendet, in der sie in der transform-Eigenschaft aufgeführt sind.

Die Effekte von Funktionen mit einer z-Achsenkomponente sind besonders auffällig, wenn sie mit der perspective-Funktion kombiniert werden, wodurch sie Tiefe erhalten. In den folgenden Markupbeispielen und Bildern wurden die perspective-Funktion und andere der transform-Eigenschaft hinzugefügt, um den Effekt der dargestellten Funktion deutlicher zu machen. Sie sollten sich die Ergebnisse der Funktionen auch mit unterschiedlichen Werten ansehen. Nutzen Sie dafür die Demo So geht's: 3D-Transformationen in der IE-Testversion.

Perspektive

perspective(<length>)

Die perspective-Funktion ändert die Perspektive auf ein Element, wodurch die Illusion von Tiefe entsteht. Je höher der Wert der perspective-Funktion ist, desto weiter entfernt erscheint dem Betrachter das Element. Der Wert wird in Pixel angegeben und muss größer als 0 (Null) sein.

Die Einheiten von <length> sind mit denen von Übersetzungsfunktionen identisch — d. h., 1 Pixel in z-Richtung entspricht derselben Strecke wie 1 Pixel in x- oder y-Richtung.

3D-Matrix

matrix3d(<number>, <number>, <number>, <number>, <number>, <number>, <number>, <number>, <number>, <number>, <number>, <number>, <number>, <number>, <number>, <number>)

Die matrix3d-Funktion gibt eine 3D-Transformation als homogene 4 × 4-Matrix mit 16 Werten an, die spaltenweise absteigend (column-major) sortiert sind. Alle anderen Transformationsfunktionen basieren auf der matrix3d-Funktion.

Beispiel:


div {
  transform: matrix3d(0.359127, -0.469472, 0.806613, 0, 0.190951, 0.882948, 0.428884, 0, -0.913545, 0, 0.406737, 0, 0, 0, 0, 1);
}

Ergebnis:

Ein quadratisches, blaues div-Element mit weißem Text nach der Anwendung der folgenden Transformationsfunktion: transform: matrix3d(0.359127, -0.469472, 0.806613, 0, 0.190951, 0.882948, 0.428884, 0, -0.913545, 0, 0.406737, 0, 0, 0, 0, 1);

3D-Übersetzung

translate3d(<translation-value>, <translation-value>, <translation-value>)

Die translate3D-Funktion gibt eine 3D-Übersetzung nach Vektor an [tx,ty,tz], wobei tx, ty und tz die Parameter für den ersten, zweiten bzw. dritten Übersetzungswert sind.

Beispiel:


div {
  transform: translate3d(20px, -60px, 50px); 
}

Ergebnis:

Ein quadratisches, blaues div-Element mit weißem Text nach Anwendung folgender Transformationsfunktionen: transform: translate3d(20px, -60px, 50px);

(Das hellblaue Quadrat gibt die ursprüngliche Position des transformierten Elements an.)

Übersetzung in z-Richtung

translateZ(<translation-value>)

Die translateZ-Funktion gibt eine Übersetzung um einen festgelegten Wert in z-Richtung an. Prozentwerte sind nicht zulässig.

Beispiel:


div {    
  transform: perspective(500px) translateZ(-60px);
}

Ergebnis:

Ein quadratisches, blaues div-Element mit weißem Text nach Anwendung folgender Transformationsfunktionen: transform: perspective(500px) translateZ(-60px);

(Das hellblaue Quadrat gibt die ursprüngliche Position des transformierten Elements an.)

3D-Skalierung

scale3d(<number>, <number>, <number>)

Die scale3d-Funktion gibt eine 3D-Skalierung um den Skalierungsvektor [sx,sy,sz] an, der durch drei Parameter definiert ist.

Beispiel:


div {
  transform: scale3d(0.5, -0.5, 1.5);
}

Ergebnis:

Ein quadratisches, blaues div-Element mit weißem Text nach Anwendung folgender Transformationsfunktionen: transform: scale3d(0.5, -0.5, 1.5);

(Das hellblaue Quadrat gibt die ursprüngliche Position des transformierten Elements an.)

Z-Vektorskalierung

scaleZ(<number>)

Die scaleZ-Funktion gibt eine Skalierung mit dem Skalierungsvektor [1,1,sz] an, wobei sz als Parameter angegeben wird. Das Ergebnis der scaleZ-Funktion ist besonders deutlich, wenn dazu z. B. die Funktionen rotate und perspective verwendet werden, wie im folgenden Beispiel dargestellt.

Beispiel:


div {
  transform: perspective(500px) scaleZ(2) rotateX(45deg);
}

Ergebnis:

Ein quadratisches, blaues div-Element mit weißem Text nach Anwendung folgender Transformationsfunktionen: transform: perspective(500px) scaleZ(2) rotateX(45deg);

(Das hellblaue Quadrat gibt die ursprüngliche Position des transformierten Elements an.)

3D-Drehung

rotate3d(<number>, <number>, <number>, <angle>)

Die rotate3d-Funktion gibt eine 3D-Drehung im Uhrzeigersinn an. Das Element wird um den im letzten Parameter angegebenen Winkel gedreht. Die Drehungsachse ist der durch die ersten drei Parameter definierte Richtungsvektor [x,y,z]. Wenn der Richtungsvektor keine Längeneinheit besitzt, wird er normalisiert. Wenn der Richtungsvektor nicht normalisiert werden kann(z. B. [0, 0, 0]), erfolgt auch keine Drehung.

Beispiel:


div {
   transform: rotate3d(0.7, 0.5, 0.7, 45deg);
}

Ergebnis:

Ein quadratisches, blaues div-Element mit weißem Text nach Anwendung folgender Transformationsfunktionen: transform: rotate3d(0.7, 0.5, 0.7, 45deg);

(Das hellblaue Quadrat gibt die ursprüngliche Position des transformierten Elements an.)

Drehung in x-Richtung

rotateX(<angle>)

Die rotateX-Funktion gibt eine Drehung im Uhrzeigersinn um den angegebenen Winkel entlang der x-Achse an.

Beispiel:


div {
  transform: perspective(500px) rotateX(45deg);
}

Ergebnis:

Ein quadratisches, blaues div-Element mit weißem Text nach Anwendung folgender Transformationsfunktionen: transform: perspective(500px) rotateX(45deg);

(Das hellblaue Quadrat gibt die ursprüngliche Position des transformierten Elements an.)

Drehung in y-Richtung

rotateY(<angle>)

Die rotateY-Funktion gibt eine Drehung im Uhrzeigersinn um den angegebenen Winkel entlang der y-Achse an.

Beispiel:


div {
  transform: perspective(500px) rotateY(45deg);
}

Ergebnis:

Ein quadratisches, blaues div-Element mit weißem Text nach Anwendung folgender Transformationsfunktionen: transform: perspective (500px) rotateY(70deg);

(Das hellblaue Quadrat gibt die ursprüngliche Position des transformierten Elements an.)

Drehung in z-Richtung

rotateZ(<angle>)

Die rotateZ-Funktion gibt eine Drehung im Uhrzeigersinn um den angegebenen Winkel entlang der z-Achse an.

Beispiel:


div {
  transform: rotateZ(65deg);
}

Ergebnis:

Ein quadratisches, blaues div-Element mit weißem Text nach Anwendung folgender Transformationsfunktionen: transform: rotateZ(65deg);

(Das hellblaue Quadrat gibt die ursprüngliche Position des transformierten Elements an.)

Die transform-origin-Eigenschaft

Die transform-origin-Eigenschaft gibt den Ursprung einer Transformation für ein Element an.

Wenn Sie z. B. in der transform-Eigenschaft die rotate3d-Funktion angegeben haben, definiert diese Eigenschaft den Punkt, um den sich das Element dreht. Der Standardwert der Eigenschaft ist "50 % 50 % 0 Pixel" (die Mitte des Elements).

EigenschaftBeschreibung

transform-origin

Gibt den Ausgangspunkt der Transformation für das angegebene Element an. Diese Eigenschaft wird auf einen bis drei Längenwerte festgelegt:

  • Der erste Längenwert gibt die Position auf der x-Achse mit Bezug auf den Container des Elements an. Dabei kann es sich um einen Längenwert (in einer unterstützten Längeneinheit), einen Prozentwert oder eines der drei folgenden Schlüsselwörter handeln: left (gibt 0 % der Längen entlang der x-Achse des enthaltenden Felds an), center (gibt den Punkt auf halber Strecke an) oder right (gibt 100 % der Länge an).
  • Der zweite Längenwert gibt die Position auf der y-Achse mit Bezug auf den Container des Elements an. Dabei kann es sich um einen Längenwert, einen Prozentwert oder eines der drei folgenden Schlüsselwörter handeln: top (gibt 0 % der Längen entlang der y-Achse des enthaltenden Felds an), center (gibt den Punkt auf halber Strecke an) oder bottom (gibt 100 % der Länge an).
  • Der dritte Längenwert gibt die Position auf der z-Achse mit Bezug auf den Container des Elements an. Es muss sich um einen Längenwert handeln.

 

Die transform-style-Eigenschaft

Die transform-style-Eigenschaft definiert, wie geschachtelte Elemente im 3D-Raum gerendert werden.

EigenschaftBeschreibung

transform-style

Definiert, wie geschachtelte Elemente im 3D-Raum gerendert werden. Wenn Sie diese Eigenschaft für ein Element auf "flat" festlegen, werden alle untergeordneten Elemente flach auf den 2D-Bereich des Elements gerendert. Wenn Sie das Element um die x-Achse oder y-Achse drehen, werden untergeordnete Elemente mit positiven oder negativen z-Positionen auf der Zeichnungsfläche des Elements dargestellt, aber nicht vor oder hinter dem Element.

 

Hinweis  Die Spezifikation der W3C definiert das Schlüsselwort preserve-3d für diese Eigenschaft, der angibt, dass keine Abflachung durchgeführt wird. Bisher unterstützt Internet Explorer 10 das Schlüsselwort preserve-3d nicht. Sie können dies umgehen, indem Sie zusätzlich zur normalen Transformation der untergeordneten Elemente noch manuell die Transformation des übergeordneten Elements auf alle untergeordneten Elemente anwenden.

Die perspective-Eigenschaft

Die perspective-Eigenschaft wendet dieselbe Transformation wie die perspective-Transformationsfunktion an, aber nur auf die positionierten und transformierten untergeordneten Elemente des Elements, und nicht auf die Transformation des Elements selbst.

EigenschaftBeschreibung

perspective

Wendet dieselbe Transformation wie die perspective-Transformationsfunktion auf das positionierte oder transformierte untergeordnete Element des Elements an, für das die Eigenschaft angewendet wird. Diese Eigenschaft kann auf eine Zahl festgelegt werden, die einen Stapelkontext und einen umgebenden Block festlegt, oder auf das Schlüsselwort none, das angibt, dass keine perspektivische Transformation angewendet wird.

 

Die perspective-origin-Eigenschaft

Die perspective-origin-Eigenschaft stellt den Ursprung für die perspective-Eigenschaft dar.

EigenschaftBeschreibung

perspective-origin

Stellt den Ausgangspunkt für die perspective-Eigenschaft bereit. Sie legt die x- und y-Position fest, an der ein Betrachter auf die untergeordneten Elemente schaut. Diese Eigenschaft wird auf einen oder zwei Längenwerte festgelegt:

  • Der erste Längenwert gibt die Position auf der x-Achse mit Bezug auf den Container des Elements an. Dabei kann es sich um einen Längenwert (in einer unterstützten Längeneinheit), einen Prozentwert oder eines der drei folgenden Schlüsselwörter handeln: left (gibt 0 % der Längen entlang der x-Achse des enthaltenden Felds an), center (gibt den Punkt auf halber Strecke an) oder right (gibt 100 % der Länge an).
  • Der zweite Längenwert gibt die Position auf der y-Achse mit Bezug auf den Container des Elements an. Dabei kann es sich um einen Längenwert, einen Prozentwert oder eines der drei folgenden Schlüsselwörter handeln: top (gibt 0 % der Längen entlang der y-Achse des enthaltenden Felds an), center (gibt den Punkt auf halber Strecke an) oder bottom (gibt 100 % der Länge an).

 

Die backface-visibility-Eigenschaft

Die backface-visibility-Eigenschaft gibt an, ob die Rückseite eines transformierten Elements für den Betrachter angezeigt wird. Bei einem nicht transformierten Element ist die Vorderseite des Elements dem Betrachter zugewandt.

EigenschaftBeschreibung

backface-visibility

Legt fest, ob die Rückseite eines transformierten Elements sichtbar ist. Diese Eigenschaft kann auf eines von zwei Schlüsselwörtern festgelegt werden:

visible

Gibt an, dass die Rückseite sichtbar ist.

hidden

Gibt an, dass die Rückseite nicht sichtbar ist.

 

API-Referenz

Transforms

Beispiele und Lernprogramme

So wird's gemacht: Lebendiges Gestalten von Webseiten mit CSS-Transformationen, -Übergängen und -Animationen

Demos für die Internet Explorer-Testversion

Lebendiges Gestalten von Seiten mit CSS-Transformationen und -Animationen
So geht's: 3D-Transformationen
So geht's: 2D-Transformationen
Flickr-Postkarten

IEBlog-Beiträge

Ganzseitige Animationen mit CSS
CSS3-3D-Transformationen in IE10

Spezifikation

CSS-Transformationen

Verwandte Themen

Grundlegendes zu CSS3-2D-Transformationen

 

 

Anzeigen:
© 2014 Microsoft