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:
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
rotateX () Methode, deren Elemente um eine gegebene Anzahl von Graden der Drehung in der X-Achse.
Beispiele
{
transform: rotateX(120deg);
-webkit-transform: rotateX(120deg); /* Safari and Chrome */
}
Versuchen »
rotateY () -Methode
rotateY () Methode, deren Elemente um eine gegebene Anzahl von Graden der Drehung in der Y-Achse.
Beispiele
{
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. |