transform

Englisch [trænsˈfɔ:m] US [trænsˈfɔ:rm]

vt.Transform; Veränderung; Veränderung

vi.Change

n.[Nummer] Transformation

CSS-Transformationseigenschaft Syntax

Rolle: Das Attribut transform wendet eine 2D- oder 3D-Transformation auf ein Element an. Mit dieser Eigenschaft können wir das Element drehen, skalieren, verschieben oder neigen. Um die Transformationseigenschaft besser zu verstehen, sehen Sie sich diese Demo an.

Syntax: transform: none|transform-functions

Beschreibung: none definiert keine Konvertierung. Matrix(n,n,n,n,n,n) definiert eine 2D-Transformation unter Verwendung einer 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 unter Verwendung einer 4x4-Matrix mit 16 Werten. Translate(x,y) definiert eine 2D-Transformation. translator3d(x,y,z) definiert die 3D-Transformation. translatorX(x) definiert die Transformation, wobei nur der Wert der X-Achse verwendet wird. translatorY(y) definiert die Transformation, wobei nur der Y-Achsenwert verwendet wird. translatorZ(z) definiert eine 3D-Übersetzung, wobei nur der Z-Achsenwert verwendet wird. scale(x,y) definiert die 2D-Skalierungstransformation. scale3d(x,y,z) definiert die 3D-Skalierungstransformation. scaleX(x) Definiert die Skalierungstransformation durch Festlegen des Werts der X-Achse. scaleY(y) definiert die Skalierungstransformation durch Festlegen des Werts der Y-Achse. scaleZ(z) Definiert die 3D-Skalierungstransformation durch Festlegen des Werts der Z-Achse. Rotate(angle) Definiert die 2D-Rotation und gibt den Winkel im Parameter an. rotate3d(x,y,z,angle) definiert die 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 Y-Achse. skewX(angle) definiert eine 2D-Schrägtransformation entlang der X-Achse. skewY(angle) definiert die 2D-Schrägtransformation entlang der Y-Achse. perspective(n) Definiert die perspektivische Ansicht für das 3D-Transformationselement.​

Hinweis: Internet Explorer 10, Firefox und Opera unterstützen das Transformationsattribut. Internet Explorer 9 unterstützt eine alternative Eigenschaft -ms-transform (nur für 2D-Transformationen). Safari und Chrome unterstützen alternative -webkit-transform-Eigenschaften (3D- und 2D-Transformationen). Opera unterstützt nur die 2D-Konvertierung.

CSS-Transformationseigenschaft Beispiel

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
margin:30px;
width:200px;
height:100px;
background-color:yellow;
/* Rotate div */
transform:rotate(9deg);
-ms-transform:rotate(9deg); /* Internet Explorer */
-moz-transform:rotate(9deg); /* Firefox */
-webkit-transform:rotate(9deg); /* Safari 和 Chrome */
-o-transform:rotate(9deg); /* Opera */
}
</style>
</head>
<body>
<div>Hello World</div>
</body>
</html>

Instanz ausführen »

Klicken Sie auf die Schaltfläche „Instanz ausführen“, um die Online-Instanz anzuzeigen