3.1 Grundlagen der kombinierten Transformationen
CSS bietet die Möglichkeit, mehrere Transformationen zu kombinieren, um komplexe visuelle Effekte zu erzeugen.
Diese Transformationen können translate, rotate, scale und skew
beinhalten und lassen sich innerhalb einer Eigenschaft transform kombinieren.
Die Eigenschaft transform kann mehrere Transformationsfunktionen enthalten, die durch Leerzeichen getrennt sind. Sie werden
in der Reihenfolge angewendet, in der sie angegeben sind. Zu verstehen, wie verschiedene Transformationen miteinander interagieren,
ist der Schlüssel zur Erstellung komplexer Animationen und Effekte.
Syntax:
element {
transform: function1() function2() ... functionN();
}
Beispiel:
element {
transform: translate(20px, 20px) rotate(45deg) scale(1.5) skew(10deg, 5deg);
}
Verschieben und Rotieren
In diesem Beispiel wird das Element um 50 Pixel nach rechts und unten verschoben und anschließend um 45 Grad gedreht.
Beispiel:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Verschieben und Rotieren</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #3498db;
transform: translate(50px, 50px) rotate(45deg);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Erklärung des Codes:
.box: Das Element wird zuerst um 50 Pixel nach rechts und unten verschoben und dann im Uhrzeigersinn um 45 Grad gedreht
3.2 Analyse verschiedener Kombinationen
1. Skalieren und Neigen
In diesem Beispiel wird das Element um das 1,5-Fache in beiden Achsen skaliert und anschließend um 20 Grad entlang der X-Achse und um 10 Grad entlang der Y-Achse geneigt.
Beispiel:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Skalieren und Neigen</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #e74c3c;
transform: scale(1.5) skew(20deg, 10deg);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Erklärung des Codes:
.box: Das Element wird zuerst um das 1,5-Fache in beiden Achsen skaliert und dann um 20 Grad in der X-Achse und um 10 Grad in der Y-Achse geneigt
2. Verschieben, Rotieren und Skalieren
In diesem Beispiel wird das Element um 100 Pixel nach rechts verschoben, um 30 Grad gedreht und um das Doppelte in der X-Achse und um das 1,5-Fache in der Y-Achse skaliert.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Verschieben, Rotieren und Skalieren</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #2ecc71;
transform: translate(100px, 0) rotate(30deg) scale(2, 1.5);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Erklärung des Codes:
-
.box: Das Element wird zuerst um 100 Pixel nach rechts verschoben, dann um 30 Grad gedreht und um das Doppelte in der X-Achse und um das 1,5-Fache in der Y-Achse skaliert
3.3 Einfluss der Reihenfolge der Transformationen
Wenn mehrere Transformationen kombiniert werden, ist es wichtig zu verstehen, dass sie nacheinander angewendet werden. Das bedeutet, dass jede nachfolgende Transformation das Ergebnis der vorherigen beeinflussen wird.
In diesem Beispiel wird gezeigt, wie die Reihenfolge der Transformationen das Endergebnis beeinflusst.
Beispiel A: zuerst rotieren, dann verschieben
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Zuerst rotieren, dann verschieben</title>
<style>
.box-a {
width: 100px;
height: 100px;
background-color: #3498db;
transform: rotate(45deg) translate(50px, 50px);
}
</style>
</head>
<body>
<div class="box-a"></div>
</body>
</html>
Beispiel B: zuerst verschieben, dann rotieren
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Zuerst verschieben, dann rotieren</title>
<style>
.box-b {
width: 100px;
height: 100px;
background-color: #e74c3c;
transform: translate(50px, 50px) rotate(45deg);
}
</style>
</head>
<body>
<div class="box-b"></div>
</body>
</html>
Erklärung des Codes:
-
.box-a: Das Element wird zuerst um 45 Grad gedreht und anschließend um 50 Pixel nach rechts und unten verschoben, was dazu führt, dass sich das Element diagonal von seiner neuen Position nach der Drehung bewegt -
.box-b: Das Element wird zuerst um 50 Pixel nach rechts und unten verschoben und dann um 45 Grad gedreht, was dazu führt, dass sich das Element relativ zu seiner neuen Position dreht
GO TO FULL VERSION