CSS transform-Eigenschaft
Die CSS transform-Eigenschaft wendet eine 2D- oder 3D-Transformation auf ein Element an. Sie ist eine der CSS3-Eigenschaften. Diese Eigenschaft ermöglicht das Drehen, Scheren, Skalieren oder Verschieben eines Elements. Sie nimmt den Wert none oder eine der Transformationsfunktionen an.
INFO
Transformationen können auf jedes Element angewendet werden, einschließlich Block-, Flex-, Grid- und Inline-Elementen.
| Anfangswert | none |
|---|---|
| Anwendbar auf | Transformierbare Elemente. |
| Vererbbar | Nein. |
| Animierbar | Ja. |
| Version | CSS3 |
| DOM-Syntax | Object.style.transform = "rotate(10deg)"; |
Syntax
CSS transform-Werte
transform: none | transform-functions | initial | inherit;Beispiel für die transform-Eigenschaft:
CSS transform-Codebeispiel
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
border: 2px dashed #666;
background-color: #8ebf42;
transform: translate(10px, 40px) rotate(50deg);
width: 130px;
height: 80px;
}
</style>
</head>
<body>
<h2>Transform property example</h2>
<div>An element</div>
</body>
</html>Ergebnis
Beispiel für die transform-Eigenschaft mit den Werten „rotate“, „skewY“, „scaleY“, „translateX“, „skew“:
CSS transform-Beispiel mit mehreren Werten
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
margin: 35px 20px;
}
div.box1 {
width: 130px;
height: 80px;
border: 1px solid #000;
background-color: #1c87c9;
transform: rotate(30deg);
}
div.box2 {
width: 120px;
height: 80px;
border: 1px solid #000;
background-color: #8ebf42;
transform: skewY(30deg);
}
div.box3 {
width: 160px;
height: 80px;
border: 1px solid #000;
background-color: #FFFF00;
transform: scaleY(1.5);
}
div.box4 {
width: 160px;
height: 80px;
border: 1px solid #000;
background-color: #ccc;
transform: rotate(160deg);
}
div.box5 {
width: 160px;
height: 80px;
border: 1px solid #000;
background-color: #990099;
transform: translateX(50px);
}
div.box6 {
width: 160px;
height: 80px;
border: 1px solid #000;
background-color: #FF0000;
transform: skew(170deg, 170deg);
}
</style>
</head>
<body>
<h2>Transform property example</h2>
<h3>transform: rotate(30deg):</h3>
<div class="box1"></div>
<h3>transform: skewY(30deg):</h3>
<div class="box2"></div>
<h3>transform: scaleY(1.5):</h3>
<div class="box3"></div>
<h3>transform: rotate(160deg):</h3>
<div class="box4"></div>
<h3>transform: translateX(50px):</h3>
<div class="box5"></div>
<h3>transform: skew(170deg,170deg):</h3>
<div class="box6"></div>
</body>
</html>Der Wert „skew“
Der Transformationswert skew() wird verwendet, um ein Element entlang der x-Achse und der y-Achse zu kippen. Die Transformationswerte skewX() und skewY() werden verwendet, um ein Element entlang der x-Achse oder der y-Achse zu kippen.
Der Wert „rotate“
Mit dem Wert rotate() wird das Element im Uhrzeigersinn aus seiner ursprünglichen Position gedreht. Die Verwendung eines negativen Werts dreht es in die entgegengesetzte Richtung.
Der Wert „translate“
Der Wert translate() verschiebt das Element nach oben oder unten sowie seitwärts. Weitere Werte werden unten vorgestellt.
Werte
| Wert | Beschreibung | Ausführen |
|---|---|---|
| none | Es wird keine Transformation angewendet. | Ausführen » |
| translate() | Verschiebt das Element um einen Vektor [tx, ty]. Tx ist die Verschiebung entlang der x-Achse. Ty ist die Verschiebung entlang der y-Achse. | Ausführen » |
| translateX() | Verschiebt das Element entlang der x-Achse. | Ausführen » |
| translateY() | Verschiebt das Element entlang der y-Achse. | Ausführen » |
| scale(x, y) | Skaliert ein Element hoch oder runter. | Ausführen » |
| scaleX() | Skaliert ein Element entlang der x-Achse. | Ausführen » |
| scaleY() | Skaliert ein Element entlang der y-Achse. | Ausführen » |
| rotate(angle) | Dreht ein Element im zweidimensionalen Raum. Der Winkel wird im Parameter angegeben. | Ausführen » |
| skew() | Definiert eine 2D-Schertransformation entlang der x-Achse und der y-Achse. | Ausführen » |
| skewX() | Definiert eine 2D-Schertransformation entlang der x-Achse. | Ausführen » |
| skewY() | Definiert eine 2D-Schertransformation entlang der y-Achse. | Ausführen » |
| matrix() | Definiert eine 2D-Transformation unter Verwendung einer Matrix aus sechs Werten. | Ausführen » |
| translateZ() | Verschiebt ein Element um den angegebenen Betrag entlang der z-Achse. | |
| translate3d() | Definiert eine dreidimensionale Verschiebung. | |
| scaleZ() | Skaliert ein Element in der dritten Dimension entlang der z-Achse. | |
| scale3d() | Definiert eine dreidimensionale Skalierungstransformation. | |
| rotateX() | Dreht ein Element um die x-Achse im dreidimensionalen Raum. | Ausführen » |
| rotateY() | Dreht ein Element um die y-Achse im dreidimensionalen Raum. | Ausführen » |
| rotateZ() | Dreht ein Element um die z-Achse im dreidimensionalen Raum. | Ausführen » |
| rotate3d() | Definiert eine dreidimensionale Rotationstransformation. | |
| matrix3d() | Definiert eine 3D-Transformation unter Verwendung einer 4x4-Matrix aus 16 Werten. | |
| perspective() | Definiert eine perspektivische Ansicht für das dreidimensionale Element. | |
| initial | Legt fest, dass die Eigenschaft ihren Standardwert verwendet. | |
| inherit | Erbt die Eigenschaft von ihrem übergeordneten Element. |
Praxis
Welche Aussage ist falsch bezüglich der transform-Eigenschaft?