Beispiel
Drehen Sie ein <div> Element:
div
{
-ms-transform: rotate(7deg); /* IE 9 */
-webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */
transform: rotate(7deg);
}
Versuch es selber " Definition und Verwendung
Die Transformations Eigenschaft gilt eine 2D- oder 3D-Transformation auf ein Element. Diese Eigenschaft ermöglicht es Ihnen, zu drehen, skalieren, verschieben, Skew, usw., Elemente.
Zum besseren Verständnis der Transformation verstehen Eigenschaft, sehen eine Demo .
| Standardwert: | none |
|---|---|
| Vererbt: | no |
| Anima: | yes. Read about animatable Try it |
| Version: | CSS3 |
| JavaScript-Syntax: | object .style.transform="rotate(7deg)" Try it |
Browser-Unterstützung
Die Zahlen in der Tabelle geben Sie die erste Browser-Version, die die Eigenschaft vollständig unterstützt.
Zahlen, gefolgt von -webkit-, -moz- oder -o- die erste Version an, die mit einem Präfix gearbeitet.
| Eigentum | |||||
|---|---|---|---|---|---|
| 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- |
Syntax
transform: none|transform-functions|initial|inherit;Eigenschaftswerte
| Wert | Beschreibung | Spiel es |
|---|---|---|
| none | Legt fest, dass es sollte keine Transformation sein | Spiel es " |
| matrix( n,n,n,n,n,n ) | Definiert eine 2D-Transformation, die eine Matrix aus sechs Werten | Spiel es " |
| matrix3d ( n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n ) | Definiert eine 3D-Transformation, eine 4x4-Matrix von 16 Werten | |
| translate( x,y ) | Definiert eine 2D-Übersetzung | Spiel es " |
| translate3d( x,y,z ) | Definiert eine 3D-Übersetzung | |
| translateX( x ) | Definiert eine Übersetzung, nur mit dem Wert für die X-Achse | Spiel es " |
| translateY( y ) | Definiert eine Übersetzung, nur mit dem Wert für die Y-Achse | Spiel es " |
| translateZ( z ) | Definiert eine 3D-Übersetzung, mit nur den Wert für die Z-Achse | |
| scale( x,y ) | Definiert eine 2D-Skala Transformation | Spiel es " |
| scale3d( x,y,z ) | Definiert eine 3D-Skalierungstransformation | |
| scaleX( x ) | Definiert eine Skalierungstransformation durch einen Wert für die X-Achse geben | Spiel es " |
| scaleY( y ) | Definiert eine Skalierungstransformation durch einen Wert für die Y-Achse geben | Spiel es " |
| scaleZ( z ) | Definiert eine 3D-Skalierungstransformation durch einen Wert für die Z-Achse geben | |
| rotate( angle ) | Definiert eine 2D-Drehung wird der Winkel in dem Parameter angegebenen | Spiel es " |
| rotate3d( x,y,z,angle ) | Definiert eine 3D-Rotation | |
| rotateX( angle ) | Definiert eine 3D-Rotation entlang der X-Achse | Spiel es " |
| rotateY( angle ) | Definiert eine 3D-Rotation entlang der Y-Achse | Spiel es " |
| rotateZ( angle ) | Definiert eine 3D-Rotation entlang der Z-Achse | Spiel es " |
| skew( x-angle,y-angle ) | Definiert eine 2D skew Transformation entlang der X- und der Y-Achse | Spiel es " |
| skewX( angle ) | Definiert eine 2D skew Transformation entlang der X-Achse | Spiel es " |
| skewY( angle ) | Definiert eine 2D skew Transformation entlang der Y-Achse | Spiel es " |
| perspective( n ) | Definiert eine perspektivische Ansicht für ein 3D-transformierte Element | |
| initial | Setzt diese Eigenschaft auf den Standardwert. Lesen Sie mehr über Anfangs | |
| inherit | Erbt diese Eigenschaft von seinem übergeordneten Element. Lesen Sie mehr über erben |
Mehr Beispiele
Bilder auf den Tisch geworfen
Dieses Beispiel zeigt , wie das Erstellen "polaroid" Bilder und die Bilder drehen.
Verwandte Seiten
CSS Tutorial: CSS 2D - Transformationen
CSS Tutorial: CSS 3D Transforms
HTML - DOM - Referenz: transform property