Latest web development tutorials

CSS3 3D-Konvertierung

3D-Transformationen

CSS3 ermöglicht es Ihnen, 3D zu verwenden Umwandlungselement zu formatieren.

In diesem Kapitel werden Sie einige der 3D-Konvertierungsmethoden lernen:

  • rotateX ()
  • rotateY ()

Klicken Sie auf die folgenden Elemente, die die Differenz zwischen 2D- und 3D-Konvertierung Konvertierung zwischen zu sehen:

2D drehen
3D drehen


Browser-Unterstützung

Die Zahlen in der Tabelle stellen die erste Browser die Versionsnummer der Immobilie zu unterstützen.

Unmittelbar im Anschluss an die digitale -webkit-, -MS- oder vor zur Unterstützung der Präfix Attributnummer erste Browser-Version -moz-.

属性
transform 36.0
12.0 -webkit-
10.0 16.0
10.0 -moz-
4.0 -webkit- 23.0
15.0 -webkit-
transform-origin
(three-value syntax)
36.0
12.0 -webkit-
10.0 16.0
10.0 -moz-
4.0 -webkit- 23.0
15.0 -webkit-
transform-style 36.0
12.0 -webkit-
11.0 16.0
10.0 -moz-
4.0 -webkit- 23.0
15.0 -webkit-
perspective 36.0
12.0 -webkit-
10.0 16.0
10.0 -moz-
4.0 -webkit- 23.0
15.0 -webkit-
perspective-origin 36.0
12.0 -webkit-
10.0 16.0
10.0 -moz-
4.0 -webkit- 23.0
15.0 -webkit-
backface-visibility 36.0
12.0 -webkit-
10.0 16.0
10.0 -moz-
4.0 -webkit- 23.0
15.0 -webkit-

rotateX () -Methode

Drehen X

rotateX () Methode, deren Elemente um eine gegebene Anzahl von Graden der Drehung in der X-Achse.

OperaSafariChromeFirefoxInternet Explorer

Beispiele

div
{
transform: rotateX(120deg);
-webkit-transform: rotateX(120deg); /* Safari and Chrome */
}

Versuchen »


rotateY () -Methode

Drehen Y

rotateY () Methode, deren Elemente um eine gegebene Anzahl von Graden der Drehung in der Y-Achse.

OperaSafariChromeFirefoxInternet Explorer

Beispiele

div
{
transform: rotateY(130deg);
-webkit-transform: rotateY(130deg); /* Safari and Chrome */
}

Versuchen »


Conversion-Eigenschaft

Die folgende Tabelle listet alle Transformationseigenschaften:

Immobilien Beschreibung CSS
transformieren Angewandt auf das Element 2D oder 3D-Konvertierung. 3
transformations Herkunft Es ermöglicht Ihnen, die Position des Elements zu ändern, umgewandelt werden. 3
Transform -Stil Die Bereitstellung war, wie verschachtelte Elemente im 3D-Raum angezeigt werden. 3
Perspektive Rückstellungen 3D-Perspektive-Effekt-Element. 3
Perspektive-Ursprung Eine vorbestimmte Position des Bodens des 3D-Elements. 3
Backface-Sichtbarkeit Definieren Sie die Elemente, wenn sie nicht in das Gesicht des Bildschirms sichtbar ist. 3

3D-Konvertierungsmethode

Funktion Beschreibung
matrix3d (n, n, n,n, n, n,
n, n, n, n,n, n, n, n, n, n)
3D-Konvertierung 16 definierte Werte 4x4 Matrix.
translate3d(x, y, z) Definierte 3D-Transformation.
translateX(x) Definieren 3D-Konvertierung, indem nur die Werte für die X-Achse.
translateY(y) Definieren 3D-Konvertierung, indem nur die Werte für die Y-Achse.
translateZ(z) Definieren 3D-Konvertierung, indem nur die Werte für die Z-Achse.
Scale3D(x, y, z) Definieren Sie 3D-Skalierungstransformation.
scaleX(x) 3D-Skalentransformation wird durch einen gegebenen Wert von X-Achse definiert.
scaleY(y) 3D-Skalentransformation wird durch einen bestimmten Wert von Y-Achse definiert.
scaleZ(z) 3D-Skalentransformation wird durch einen bestimmten Wert von Z-Achse definiert.
rotate3d (x, y, z,Winkel) Definieren Sie 3D-Rotation.
rotateX(Winkel) Definiert entlang der X-Achse 3D-Rotation.
rotateY(Winkel) Definiert entlang der Y-Achse 3D-Rotation.
rotateZ(Winkel) Definiert entlang der Z-Achse 3D-Rotation.
Perspektive(n) 3D perspektivische Ansicht der Definition des Umwandlungselements.