Style transform -Eigenschaft
Style-ObjektBeispiele
Ein div-Element drehen:
document.getElementById("myDIV").style.transform="rotate(7deg)";
Selbst ausprobieren »
Definition und Verwendung
Die transform-Eigenschaft wendet eine 2D- oder 3D-Transformation auf ein Element an. Diese Eigenschaft ermöglicht es Ihnen, ein Element zu drehen, zu skalieren, zu verschieben oder zu verzerren.
Browser-Unterstützung
Internet Explorer 10 und Firefox unterstützen die transform-Eigenschaft.
Internet Explorer 9 unterstützt eine alternative Eigenschaft zu dieser Eigenschaft, nämlich die msTransform-Eigenschaft (nur für 2D-Transformationen).
Opera, Chrome und Safari unterstützen eine alternative Eigenschaft zu dieser Eigenschaft, nämlich die WebkitTransform-Eigenschaft (verwendbar für 3D- und 2D-Transformationen).
Syntax
transform-Eigenschaft zurückgeben:
object.style.transform
transform-Eigenschaft festlegen:
object.style.transform="none|transform-functions|initial|inherit"
Eigenschaftswerte
| Wert | Beschreibung |
|---|---|
| none | Definiert keine Transformation. |
| matrix(n,n,n,n,n,n) | Definiert eine 2D-Transformation unter Verwendung einer Matrix mit sechs Werten. |
| matrix3d (n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) |
Definiert eine 3D-Transformation unter Verwendung einer 4x4-Matrix mit 16 Werten. |
| translate(x,y) | Definiert eine 2D-Transformation. |
| translate3d(x,y,z) | Definiert eine 3D-Transformation. |
| translateX(x) | Definiert eine Transformation, die nur den X-Achsen-Wert verwendet. |
| translateY(y) | Definiert eine Transformation, die nur den Y-Achsen-Wert verwendet. |
| translateZ(z) | Definiert eine 3D-Transformation, die nur den Z-Achsen-Wert verwendet. |
| scale(x,y) | Definiert eine 2D-Skalierungstransformation. |
| scale3d(x,y,z) | Definiert eine 3D-Skalierungstransformation. |
| scaleX(x) | Definiert eine Skalierungstransformation durch Festlegen des X-Achsen-Werts. |
| scaleY(y) | Definiert eine Skalierungstransformation durch Festlegen des Y-Achsen-Werts. |
| scaleZ(z) | Definiert eine 3D-Skalierungstransformation durch Festlegen des Z-Achsen-Werts. |
| rotate(angle) | Definiert eine 2D-Rotation, die den Winkel im Parameter angibt. |
| 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-Scherungstransformation entlang der X- und Y-Achsen. |
| skewX(angle) | Definiert eine 2D-Schertransformation entlang der X-Achse. |
| skewY(angle) | Definiert eine 2D-Schertransformation entlang der Y-Achse. |
| perspective(n) | Definiert eine perspektivische Ansicht für 3D-Transformationselemente. |
| initial | Setzt diese Eigenschaft auf ihren Standardwert. Sieheinitial。 |
| inherit | Erbt diese Eigenschaft von seinem Elternelement. Sieheinherit。 |
Technische Details
| Standardwert: | none |
|---|---|
| Rückgabewert: | Ein String, der die transform-Eigenschaft des Elements darstellt. |
| CSS-Version | CSS3 |
Ähnliche Artikel
CSS-Referenz:transform-Eigenschaft
Weitere Erweiterungen