CSS Referenz Element transformieren (3D)
Anzeige Hier werben
transform (3D)
Werte: Transformationsfunktion(Längen, Prozente, Winkel)
Standardwert: -
Vererbung: Nein
Kurzschreibweise: keine
Anwendbar auf: Block & Inline Elemente
CSS-Level: CSS3
Die CSS3 Eigenschaft transform erlaubt es Elemente dreidimensional zu transformieren. Mit transform kann also das Koordinatensystem beeinflusst werden. Elemente können im zweidimensionalen und dreidimensionalen Raum verschoben, gedreht und / oder skaliert werden.
Die angezeigten Elemente selber werden allerdings nicht 3D, sondern nur 2D gerendert.
Werte
Bisher wird transform nur von Safari 4, Firefox 3.5 und Opera 10.5 unter Angebe des Prefix -webkit bzw -moz und -o unterstützt. Darunter fallen beispielsweise die CSS Eigenschaften translate(), scale(), rotate().
-webkit-transform: translate(200px,0);
-moz-transform: translate(200px,0);
-o-transform: translate(200px, 0);
| Wert |
Beschreibung |
| matrix(u, v, w, x, y, z) | 2D Transformation |
| matrix3d(a, b, c, d, e, f, g, h, i, j, k, l m, n, o, p) |
3D Transformation |
| translate(x,y) | 2D Verschiebung durch Vektor (x,y) |
| translate3d(x, y, z) | 3D Verschiebung durch Vektor (x,y,z) |
| translateX(x) | Verschiebung in x-Richting |
| translateY(x) | Verschiebung in y-Richtung |
| translateZ(x) | Verschiebung in z-Zichtung |
| Skala(x,y) | 2D Skalierung um den Vektor (x,y) |
| scale3d | Skalierung um den Vektor (x,y,z) |
| scaleX(x) | Skalierung um den Vektor (x,1,1) |
| scaleY(x) | Skalierung um den Vektor (1,x,1) |
| scaleZ(x) | Skalierung um den Vektor (1,1,x) |
| rotate(winkel) | 2D Rotation um Winkel |
| 3DRotation(x,y,z,winkel) | 3D Rotation im Uhrzeigersinn um Punkt mit Winkel |
| rotateX(winkel) |
Drehung im Uhrzeigersinn um x-Achse |
| rotateY(winkel) | Drehung im Uhrzeigersinn um y-Achse |
| rotateZ(winkel) | Drehung im Uhrzeigersinn um z-Achse |
| Skew(winkel, winkel) | Verzerrung entlang x- & y-Achse |
| skewX(winkel) | Verzerrung entlang x-Achse |
| skewY(winkel) | Verzerrung entlang y-Achse |
| Perspektive(x) |
Beispiele
Rotation
1
2
3
4
5
6 | <div style="width:200px;
height:50px;
background:#ECECEC;
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);">
rotiertes Div</div>
|
Skalierung
1
2
3
4
5
6 | <div style="width:200px;
height:50px;
background:#ECECEC;
-webkit-transform: scale(2);
-moz-transform: scale(2);">
skaliertes Div</div>
|
weitere CSS3 transform Eingenschaften:
transform: Element transformieren (2D)
Diese Seite kann von jedem registrierten Benutzer bearbeitet werden. Bisher hat 1 Person an der Seite "CSS Referenz Element transformieren (3D)" mitgewirkt.
Sie haben einen Fehler entdeckt oder möchten etwas ergänzen? Dann können Sie nach der Anmeldung "CSS Referenz Element transformieren (3D)" hier bearbeiten.
-
graphic, motion & web design - kernreaktor - mutter kind turnen