Beispiel
Drehen Sie ein div-Element:
document.getElementById("myDIV").style.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, drehen, skalieren, verschieben, Skew usw. Elemente.
Browser-Unterstützung
Die Transformations Eigenschaft wird in Internet Explorer 10 und Firefox unterstützt.
Internet Explorer 9 unterstützt eine Alternative, die msTransform Eigenschaft (2D transforms only) .
Opera, Chrome und Safari unterstützen eine Alternative, die WebkitTransform Eigenschaft (3D- und 2D-transformiert).
Syntax
Bringen Sie die Eigenschaft trans:
object .style.transform Stellen Sie die Eigenschaft trans:
object .style.transform="none| Eigenschaftswerte Wert Beschreibung none Legt fest, dass es sollte keine Transformation sein matrix( n,n,n,n,n,n ) Definiert eine 2D-Transformation, die eine Matrix aus sechs Werten 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 translate3d( x,y,z ) Definiert eine 3D-Übersetzung translateX( x ) Definiert eine Übersetzung, indem nur der Wert für die X-Achse translateY( y ) Definiert eine Übersetzung, indem nur der Wert für die Y-Achse translateZ( z ) Definiert eine 3D-Übersetzung, mit nur den Wert für die Z-Achse scale( x,y ) Definiert eine 2D-Skala Transformation scale3d( x,y,z ) Definiert eine 3D-Skalierungstransformation scaleX( x ) Definiert eine Skalierungstransformation durch einen Wert für die X-Achse geben scaleY( y ) Definiert eine Skalierungstransformation durch einen Wert für die Y-Achse gibt 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 rotate3d( x,y,z,angle ) Definiert eine 3D-Rotation rotateX( angle ) Definiert eine 3D-Rotation entlang der X-Achse rotateY( angle ) Definiert eine 3D-Rotation entlang der Y-Achse rotateZ( angle ) Definiert eine 3D-Rotation entlang der Z-Achse skew( x-angle,y-angle ) Definiert eine 2D skew Transformation entlang der X- und der Y-Achse skewX( angle ) Definiert eine 2D-Skew-Transformation entlang der X-Achse skewY( angle ) Definiert eine 2D skew Transformation entlang der Y-Achse perspective( n ) Definiert eine perspektivische Ansicht für ein 3D-transformierte Element initial Setzt diese Eigenschaft auf den Standardwert. Lesen Sie mehr über Anfang inherit Erbt diese Eigenschaft von seinem übergeordneten Elemente. Lesen Sie mehr über erben
Technische Details
Standardwert: keiner Rückgabewert: Ein String, die die Transformations Eigenschaft eines Elements CSS Version CSS3
Verwandte Seiten
CSS - Referenz: transform property
<Style - Objekt