1.1 Eigenschaft transform
CSS-Transformationen ermöglichen das Ändern von Position, Größe, Drehung und Neigung von Elementen, ohne ihren normalen Dokumentenfluss zu ändern. Dies ist ein mächtiges Werkzeug zur Erstellung interaktiver und dynamischer Weboberflächen. Lass uns die Grundlagen der Transformationen mit den Eigenschaften transform, translate, rotate, scale und skew anschauen.
Die Eigenschaft transform erlaubt es, zweidimensionale und dreidimensionale Transformationen an Elementen anzuwenden. Sie kombiniert verschiedene Transformationsfunktionen wie translate, rotate, scale und skew.
Syntax:
element {
transform: transformation-function;
}
Wo:
transformation-function: die auf das Element angewandte Transformationsfunktion
Beispiel für die Verwendung:
.element {
transform: translate(50px, 100px);
}
1.2 Transformation translate
Die Transformation translate wird verwendet, um ein Element entlang der X- und/oder Y-Achse zu verschieben.
Syntax:
element {
transform: translate(x, y);
}
Wo:
x: Verschiebung entlang der X-Achse (kann negativ oder positiv sein)y: Verschiebung entlang der Y-Achse (kann negativ oder positiv sein)
Beispiel:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Translate-Transformation</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #3498db;
transition: transform 0.5s;
}
.box:hover {
transform: translate(50px, 50px);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Code-Erklärung:
.box: ein Element mit festen Abmessungen und Farbe.box:hover: bei Hover über das Element wird die Transformationtranslate(50px, 50px)angewendet, wodurch es um 50 Pixel nach rechts und unten verschoben wird
1.3 Transformation rotate
Die Transformation rotate wird verwendet, um ein Element um sein Zentrum zu drehen.
Syntax:
element {
transform: rotate(angle);
}
Wo:
angle: Drehwinkel in Grad (kann negativ oder positiv sein)
Beispiel:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rotate-Transformation</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #e74c3c;
transition: transform 0.5s;
}
.box:hover {
transform: rotate(45deg);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Code-Erklärung:
.box: ein Element mit festen Abmessungen und Farbe.box:hover: bei Hover über das Element wird die Transformationrotate(45deg)angewendet, wodurch es um 45 Grad im Uhrzeigersinn gedreht wird
1.4 Transformation scale
Die Transformation scale wird verwendet, um die Größe eines Elements entlang der X- und/oder Y-Achse zu ändern.
Syntax:
element {
transform: scale(sx, sy);
}
Wo:
sx: Skalierung entlang der X-Achse (Wert größer als 1 vergrößert das Element, kleiner als 1 verkleinert es)sy: Skalierung entlang der Y-Achse (Wert größer als 1 vergrößert das Element, kleiner als 1 verkleinert es)
Beispiel:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scale-Transformation</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #2ecc71;
transition: transform 0.5s;
}
.box:hover {
transform: scale(1.5, 1.5);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Code-Erklärung:
.box: ein Element mit festen Abmessungen und Farbe-
.box:hover: bei Hover über das Element wird die Transformationscale(1.5, 1.5)angewendet, wodurch es auf das 1,5-fache vergrößert wird
1.5 Transformation skew
Die Transformation skew wird verwendet, um ein Element entlang der X- und/oder Y-Achse zu neigen.
Syntax:
element {
transform: skew(ax, ay);
}
Wo:
ax: Neigungswinkel entlang der X-Achse (kann negativ oder positiv sein)ay: Neigungswinkel entlang der Y-Achse (kann negativ oder positiv sein)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Skew-Transformation</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #9b59b6;
transition: transform 0.5s;
}
.box:hover {
transform: skew(20deg, 10deg);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Code-Erklärung:
.box: ein Element mit festen Abmessungen und Farbe..box:hover: bei Hover über das Element wird die Transformationskew(20deg, 10deg)angewendet, wodurch es um 20 Grad entlang der X-Achse und um 10 Grad entlang der Y-Achse geneigt wird.
1.6 Kombination verschiedener Transformationen
Die Eigenschaft transform erlaubt es, mehrere Transformationsfunktionen zu kombinieren, um komplexe Effekte zu erzielen.
Beispiel:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kombinierte Transformationen</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #3498db;
transition: transform 0.5s;
}
.box:hover {
transform: translate(50px, 50px) rotate(45deg) scale(1.5) skew(20deg, 10deg);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Code-Erklärung:
.box: ein Element mit festen Abmessungen und Farbe.box:hover: bei Hover über das Element werden gleichzeitig die Transformationentranslate,rotate,scaleundskewangewendet, was einen komplexen Effekt erzeugt
GO TO FULL VERSION