CSS3 Eigenschaft trans
Beispiele
Rotation div-Element:
div
{
transform:rotate(7deg);
-ms-transform:rotate(7deg); /* IE 9 */
-webkit-transform:rotate(7deg); /* Safari and Chrome */
}
{
transform:rotate(7deg);
-ms-transform:rotate(7deg); /* IE 9 */
-webkit-transform:rotate(7deg); /* Safari and Chrome */
}
Versuchen »
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 (2D) | 36.0 4.0 -webkit- |
10.0 9.0 -ms- |
16.0 3.5 -moz- |
9.0 3.2 -webkit- |
23.0 15.0 -webkit- 10.5 -o- |
| transform (3D) | 36.0 12.0 -webkit- |
12.0 | 10.0 | 16.0 10.0 -moz- |
9.0 4.0 -webkit- |
Attributdefinitionen und Anweisungen
Transform-Eigenschaft 2D ist mit dem Element oder 3D-Konvertierung angewendet. Diese Eigenschaft ermöglicht es Ihnen, Elemente drehen, zoomen, verschieben, Neigung, und so weiter.
Zum besseren Verständnis der Transformation verstehen Eigenschaften finden Sie in der Online - Instanz .
| Standard: | keiner |
|---|---|
| Vererbung: | keine |
| Version: | CSS3 |
| JavaScript-Syntax: | Objekt .style.transform = "drehen (7deg)" |
Grammatik
Transformation:keine | Transform -Funktionen;
| Wert | Beschreibung |
|---|---|
| keiner | Definition nicht konvertieren. |
| Matrix (n, n, n,n, n, n) | Definieren Sie 2D-Konvertierung, die eine Matrix aus sechs Werten. |
| matrix3d (n, n, n,n, n, n, n, n, n, n, n, n, n, n, n, n) | 3D-Konvertierung 16 definierte Werte 4x4 Matrix. |
| translate(x, y) | Definieren Sie die 2D-Konvertierung. |
| translate3d(x, y, z) | Definieren Sie 3D-Konvertierung. |
| translateX(x) | Definition der Umwandlung, jedoch mit dem Wert der X-Achse. |
| translateY(y) | Definition der Umwandlung, jedoch mit dem Wert der Y-Achse. |
| translateZ(z) | Definieren Sie 3D-Konvertierung, aber mit dem Wert der Z-Achse. |
| Skala (x [, y]?) | Definieren Sie 2D-Skala Transformation. |
| Scale3D(x, y, z) | Definieren Sie 3D-Skalierungstransformation. |
| scaleX(x) | Durch Einstellen des Skalierungstransformation zu definieren den Wert der X-Achse. |
| scaleY(y) | Durch die Einstellung der Achse den Wert der Y die Skalentransformation zu definieren. |
| scaleZ(z) | die 3D-Skalierungstransformation zu definieren, indem Sie den Wert der Z-Achse einstellen. |
| drehen(Winkel) | Definieren 2D einen vorbestimmten Winkel in dem Argument gedreht. |
| rotate3d (x, y, z,Winkel) | Definieren Sie 3D-Rotation. |
| rotateX(Winkel) | 3D-X entlang der Welle definiert. |
| rotateY(Winkel) | 3D-Y-Achse ist entlang der Dreh definiert. |
| rotateZ(Winkel) | 3D-Z-Achse ist entlang der Dreh definiert. |
| Skew (x-Winkel, y-Winkel) | Definiert entlang der 2D-X und Y-Achsen-skew Transformation. |
| skewX(Winkel) | 2D X-Achse ist entlang der Neigung der Umwandlungs definiert. |
| skewY(Winkel) | Definiert entlang der Y-Achsen-Neigungstransformation 2D. |
| Perspektive(n) | 3D-Umwandlungselement eine perspektivische Ansicht zu definieren. |
Weitere Beispiele
Drehen Sie ein Bild
Dieses Beispiel zeigt, wie ein "polaroid" Fotos zu erstellen und Bilder drehen.