CSS3-3D-Transformationen in IE10

IEBlog Deutsch

Blog des Internet Explorer-Entwicklerteams

CSS3-3D-Transformationen in IE10

  • Comments 0

Mithilfe von CSS3-Features lassen sich einfach funktionsreiche und ansprechende Websites erstellen. In einem kürzlich veröffentlichten Beitrag wurde beschrieben, wie Webentwickler mit CSS3-Übergängen und Animationen Websites persönlicher gestalten können. CSS3-3D-Transformationen eröffnen hier (sprichwörtlich) eine neue Dimension, um die Entwickler ihre Websites erweitern können. Beispielsweise werden auf der Metro-Stil-Startseite von Windows 8, wie im Folgenden dargestellt, dezente 3D-Tranformationen verwendet, um ausgewählte Kacheln hervorzuheben.

Internet Explorer 10-Kachel – nicht ausgewählt (links) und ausgewählt (rechts)
Internet Explorer 10-Kachel – nicht ausgewählt (links) und ausgewählt (rechts)

Hinzufügen einer 3. Dimension zu CSS-Transformationen

Ebenso wie CSS3-2D-Transformationen stellen 3D-Transformationen Funktionen und Werte für die CSS-Eigenschaften transform und transform-origin bereit, die geometrische Transformationen von HTML-Elementen bieten. Mit CSS-3D-Transformationen sind nun auch 3D-Transformationen möglich. Die Transformationsfunktionen rotate(), scale(), translate(), skew() und matrix() werden mit einem Parameter für die z-Koordinate in den dreidimensionalen Raum erweitert – oder wie im Fall von matrix3d() um zusätzliche 10 Parameter, die zusätzliche Transformationsfunktionen wie rotateZ() und scaleZ() nach sich ziehen.

Die neue Transformationsfunktion perspective verleiht transformierten Elementen Tiefe, da entfernte Punkte kleiner erscheinen.

Mit den CSS3-3D-Transformationen werden außerdem einige neue CSS-Eigenschaften hinzugefügt. Zusätzlich zu den Eigenschaften transform und transform-origin unterstützt IE10 perspective, perspective-origin, backface-visibility und den flat-Wert von transform-style, jeweils mit Herstellerpräfix.

Hinweis: In den Markup-Beispielen in diesem Beitrag werden die im W3C-Standard definierten Eigenschaften ohne Präfix verwendet. Jedoch wird derzeit in allen Browser, in denen dieses Feature implementiert ist, ein herstellerspezifisches Präfix verwendet. Achten Sie darauf, das Präfix für Ihren Browser hinzuzufügen, wenn Sie das Beispiel-Markup ausprobieren.

Perspektive

Die Transformationsfunktion perspective ist bei 3D-Transformationen besonders wichtig. Mit dieser Eigenschaft wird der Standort des Betrachters festgelegt und der sichtbare Inhalt auf einer Anzeigepyramide zugeordnet, die anschließend auf einen 2D-Anzeigebereich projiziert wird. Ohne die Angabe der Perspektive werden alle Punkte der Z-Dimension im selben 2D-Bereich angezeigt, und bei der Transformation entsteht keine Tiefenwirkung. Bei einigen Transformationen, wie beispielsweise der im Folgenden dargestellten Parallelverschiebung entlang der Z-Achse, ist die Transformationsfunktion für die Perspektive unbedingt erforderlich, damit die Transformation überhaupt eine sichtbare Wirkung erzielt.

In den folgenden Beispielen ist  das ursprünglich Element ohne Transformation und  das transformierte Element.

Beispiel für „transform: perspective(500px) translate(0px, 0px, -300px);“ Beispiel für „transform: translate(0px, 0px, -300px);“
transform: perspective(500px) translate(0px, 0px, -300px); transform: translate(0px, 0px, -300px);
 
transform: perspective(500px) rotateY(30deg); Beispiel für „transform: rotateY(30deg);
transform: perspective(500px) rotateY(30deg); transform: rotateY(30deg);

Mithilfe der Anwendung der perspective-Eigenschaft auf übergeordnete Elemente kann eine perspektivische Transformation rasch auf mehrere Elemente angewendet werden. Die perspective-Eigenschaft übernimmt die perspektivische Transformation für alle untergeordneten Elemente:

Beispiel für zwei „div“-Container, die mit derselben übergeordneten „perspective“-Eigenschaft transformiert werden

#parent {

perspective: 500px;

}

 

#div1 {

position: absolute;

transform-origin: 0px 0px;

transform: rotateY(30deg);

}

 

#div2 {

position: absolute;

transform-origin: 0px 0px;

transform: rotateY(30deg) translate(220px);

}

Die Eigenschaft perspective-origin kann auch zusammen mit perspective verwendet werden, um den Blickpunkt aus der Mitte des Elements zu verschieben:

Beispiel für die Eigenschaft „perspective-depth“

Im Folgenden wird dargestellt, wie eine Verschiebung des Betrachterstandpunkts nach links den Inhalt rechts vom ursprünglichen Betrachterstandpunkt weiter entfernt erscheinen lässt.

Beispiel für zwei „div“-Container, die mit derselben übergeordneten Eigenschaft „perspective-depth“ transformiert werden

#parent {

perspective: 500px;

perspective-origin: -300px 0px;

}

Die Eigenschaft „backface-visibility“

Mit der Eigenschaft backface-visibility lässt sich die Rückseite des Inhalts einfach ausblenden. Standardmäßig wird die Rückseite angezeigt, und der transformierte Inhalt ist auch dann sichtbar, wenn das Element gedreht wird. Der Inhalt wird jedoch ausgeblendet, wenn backface-visibility auf hidden festgelegt wird. So ist die Vorderseite bei einer Drehung des Elements nicht mehr sichtbar. Dies ist bei der Simulation eines mehrseitigen Objekts, wie der Karte im folgenden Beispiel, besonders praktisch. Indem backface-visibility auf hidden festgelegt wird, lässt sich einfach sicherstellen, dass nur die Seiten sichtbar sind, die auch nach vorne weisen.

CSS-Markup:

.card, .card div {

position: absolute;

width: 102px;

height: 143px;

}

 

.card div:nth-child(1) {

background-image: url('redback.png');

}

 

.card div:nth-child(2) {

background-image: url('8clubs.png');

backface-visibility: hidden;

}

HTML-Markup für eine Karte:

<div class="card"><div></div><div></div></div>

Wenn Sie sechs Karten erstellen, wie oben definiert , und jeder eine style="transform: rotateY(ndeg)"-Eigenschaft mit einem anderen Rotationswert n zuweisen, geschieht Folgendes:

Reihe mit 6 Karten, die umgedreht werden
rotateY(0deg);rotateY(36deg);rotateY(72deg);rotateY(108deg);rotateY(144deg);rotateY(180deg);

Wenn keine Drehung erfolgt, sehen Sie in diesem Beispiel das zweite div, die Kreuz-8, da sich dieses in der Zeichnungsreihenfolge oben befindet. Wenn die Karte gedreht wird und 90 Grad erreicht werden, sorgt die backface-visibility: hidden;-Eigenschaft des zweiten div-Containers dafür, dass dieser ausgeblendet und folglich der erste div-Container, die Kartenrückseite, angezeigt wird.

3D-Transformationen mit Animationen und Übergängen

Das Beste ist, dass Sie 3D-Transformationen sogar mit CSS-Übergängen und -Animationen kombinieren können. Wenn Sie IE10 oder einen anderen Browser verwenden, der CSS3-Animationen und CSS3-3D-Transformationen unterstützt, sollten Sie unbedingt dieses Lauftextbeispiel ausprobieren, dass mithilfe einer animierten transform-Eigenschaft erstellt wurde.

Mit diesem CSS-Markup wird der in den folgenden Screenshots dargestellte Effekt erzielt.

#parentDiv {

perspective: 500px;

perspective-origin: 150px 500px;

}

 

#div1 {

transform-origin: 150px 500px;

animation: scrollText 200s linear infinite;

}

 

@keyframes scrollText {

0% { transform: rotateX(45deg) translateY(500px); }

100% { transform: rotateX(45deg) translateY(-8300px); }

}

Frühe Abbildung aus der Demo, in der Laufschrift mit 3D-Transformationen animiert wirdNeuere Abbildung aus der Demo, in der Laufschrift mit 3D-Transformationen animiert wird

Jetzt testen

Testen Sie dies jetzt mit IE10 in der Windows Developer Preview. Die Test Drive-Demo Hands On: 3D Transforms verdeutlicht die Möglichkeiten von CSS-3D-Transformationen.

Wir freuen uns auf Ihre Werke!

—Jennifer Yu, Program Manager, Internet Explorer Graphics