Als Browser leistungsfähiger, interessante neue Funktionen für HTML5 und CSS3 Programmierung werden entstehen. Eine der spannendsten Entwicklungen ist die Bildung von 3D-Transformationen. Eine 3D-Transformation ist ähnlich zu den herkömmlichen Transformationen, aber es ermöglicht, für eine virtuelle dritte Achse.

Gewöhnliche, nutzen 2D-Animationen das 2D-Koordinatensystem mit einer X-Achse von Seite zu Seite zu gehen und eine Y-Achse durchquert von oben nach unten. Auch in 2D Transformationen gibt es eine stillschweigende Bestätigung einer Z-Achse. Die Z-Achse geht durch den Mittelpunkt des Objekts und zeigt direkt auf die Augen des Betrachters und zurück in die Unendlichkeit hinter dem Bildschirm. 2D-Drehungen um diese imaginäre Z-Achse.

Sie können, welche Elemente überlappen andere Elemente durch die CSS-Eigenschaft zu bestimmen, so dass, obwohl alle Bildschirmelemente die gleiche tatsächliche Abstand vom Benutzer sind, erscheinen sie irgendeine Form von Tiefe zu haben.

3D-Transformationen haben die gleichen allgemeinen Operationen wie 2D (Verschieben, Drehen und Skalieren), aber man kann die Transformation entlang einer der drei Achsen gelten: X, Y oder Z

Sie sehen fünf Kisten mit nahezu identischen Stile. Jede Box hat eine andere 3D-Transformation angewendet:

• Box 1 hat Standard-Verhalten: Box 1 verwendet normale Layout ohne 3D-Transformation überhaupt angewendet.

• Box 2 ist um 45 Grad um die x gedreht: Box 2 erscheint abgeschnitten werden, aber es ist tatsächlich um die horizontale Achse (X) gedreht. Beachten Sie, dass sowohl die Box selbst und der Text in der Box verkürzt werden.

• Box 3 ist fast unsichtbar: Box 3 hat sich auch um die X-Achse gedreht wurde, aber dieser ist fast 90 Grad gedreht, so dass es fast unsichtbar.

• Box 4 ist upside-down: Box 4 ist um 180 Grad um die X-Achse gedreht, Spiegeln sie vollständig. Man beachte, daß auch um die Y-Achse dreht, würde die Box flip, aber der Text würde an der Spitze bleiben und würde entlang der vertikalen Achse umgekehrt werden.

• Box 5 wird dabei alle Arten von verrückten Dinge: Box 5 besitzt zwei Transformationen gleichzeitig angewendet. Es wird 45 Grad um x und -45 Grad entlang y gedreht.

Werfen Sie einen Blick auf den Code genau zu sehen, was hier geschieht.

3D-Transformation Demo
Box 1
Box 2
Box 3
Box 4
Box 5

Die erste neue Regel ist Perspektive. Ändern Sie die Perspektive des übergeordneten Elements, die Ihre transformierten Elemente enthalten wird. Dies gibt Ihnen die Möglichkeit, um zu bestimmen, wie die Elemente angezeigt werden, erscheinen. Die Perspektive zeigt an, wie nahe die Kamera auf die Elemente zu sein scheint.

Boxen 2 bis 4 alle verwenden die gleiche Transformationsregel:. Dieser Mechanismus ist ähnlich wie die 2D drehen ()Funktion, aber es dreht sich entlang der X-Achse. Es gibt auch rotatey ()und rotatez () Funktionen, aber rotatez ()selten verwendet, da es ebenso wie die 2D ist drehen ()Technik.

Wenn Sie mehr als eine Umdrehung anwenden möchten, können Sie mit dem drehen 3d ()Funktion. Diese Funktion nimmt vier Parameter. Die ersten drei sind Modifikatoren für die drei Achsen, und der vierte ein Winkel.

CSS3 unterstützt auch die translatex, translatey (), und translatez () Funktionen. Diese Mechanismen können Sie Achse Die eine Verschiebung entlang einer bestimmten angeben translate3d () Funktion ermöglicht es Ihnen, entlang mehrerer Achsen gleichzeitig zu übersetzen.

CSS3 enthält scalex, scaley, und scaleZ Funktionen, aber wieder verwendet werden diese nicht immer, weil sie in den 2D-Skalierungsfunktion ähnlich wirken. Da ist auch ein Skala 3d () Funktion für die Verwendung mit mehreren Skalen.

Die Unterstützung für die 3D-Transformationen wächst, aber nicht vollständig. Im Moment der -webkit und No-Präfix-Versionen werden die meisten Browser unterstützen. Die IE-Familie von Browsern hat begrenzte Unterstützung für 3D-Transformationen.