2.1 Eigenschaft transform-origin
Die CSS-Eigenschaft transform-origin bestimmt den Punkt, um den Transformationen wie
rotate, scale, skew und translate angewendet werden. Standardmäßig befindet sich dieser Punkt im Zentrum des Elements, aber du kannst seine Position ändern, um die gewünschten visuellen Effekte zu erzielen.
Grundlagen von transform-origin
Syntax der Eigenschaft transform-origin:
element {
transform-origin: x-axis y-axis z-axis;
}
Wo:
x-axis: bestimmt die Position des Punktes auf der horizontalen Achsey-axis: bestimmt die Position des Punktes auf der vertikalen Achsez-axis: bestimmt die Position des Punktes auf der Z-Achse (wird für 3D-Transformationen verwendet)
Mögliche Werte:
- Schlüsselwörter:
top,right,bottom,left,center - Prozentwerte: geben den Ursprungspunkt in Prozent der Elementgröße an
- Absolute Werte: geben den Ursprungspunkt in Pixeln oder anderen Maßeinheiten an
Beispiele für Werte:
transform-origin: 50% 50%;— Zentrum des Elements (Standardwert)transform-origin: 0 0;— obere linke Ecke des Elementstransform-origin: 100% 100%;— untere rechte Ecke des Elementstransform-origin: 50px 100px;— Verschiebung um 50 Pixel nach rechts und 100 Pixel nach unten von der oberen linken Ecke
Zentrierung des Ursprungspunkts (Standard)
In diesem Beispiel wird die Transformation rotate um das Zentrum des Elements erfolgen.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Zentrierung des Ursprungspunkts</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #3498db;
transform: rotate(45deg);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
2.2 Verschiebung des Punkts
Verschiebung des Ursprungspunkts zur oberen linken Ecke
In diesem Beispiel ist der Ursprungspunkt der Transformation zur oberen linken Ecke des Elements verschoben.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ursprungspunkt in der oberen linken Ecke</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #e74c3c;
transform: rotate(45deg);
transform-origin: top left;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Verschiebung des Ursprungspunkts zur unteren rechten Ecke
In diesem Beispiel ist der Ursprungspunkt der Transformation zur unteren rechten Ecke des Elements verschoben.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ursprungspunkt in der unteren rechten Ecke</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #2ecc71;
transform: rotate(45deg);
transform-origin: bottom right;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
2.3 Angabe der Werte
Verwendung von Prozentwerten
In diesem Beispiel befindet sich der Ursprungspunkt der Transformation bei 25% horizontal und 75% vertikal.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ursprungspunkt mit Prozentwerten</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #9b59b6;
transform: rotate(45deg);
transform-origin: 25% 75%;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Verwendung von absoluten Werten
In diesem Beispiel ist der Ursprungspunkt der Transformation 50 Pixel horizontal und 20 Pixel vertikal verschoben.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ursprungspunkt mit absoluten Werten</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #f1c40f;
transform: rotate(45deg);
transform-origin: 50px 20px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
2.4 Praktische Anwendung
Drehung eines Elements um einen bestimmten Punkt
Die Nutzung von transform-origin ist nützlich, um drehende Elemente zu erstellen, die sich
um einen bestimmten Punkt drehen sollen. Zum Beispiel das Erstellen eines Uhrzeigers.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Drehung eines Uhrzeigers</title>
<style>
.clock {
position: relative;
width: 200px;
height: 200px;
border: 5px solid #333;
border-radius: 50%;
margin: 50px auto;
}
.hand {
position: absolute;
bottom: 50%;
left: 50%;
width: 5px;
height: 50%;
background-color: #333;
transform-origin: bottom center;
}
.hour-hand {
transform: rotate(30deg); /* Beispiel für die Position bei 1 Uhr */
}
</style>
</head>
<body>
<div class="clock">
<div class="hand hour-hand"></div>
</div>
</body>
</html>
Erstellen eines skalierbaren Elements
Die Veränderung des Ursprungspunkts ist auch nützlich, um Elemente relativ zu verschiedenen Punkten zu skalieren, was hilfreich sein kann, um dynamische Benutzeroberflächen zu erstellen.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Skalierbares Element</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #1abc9c;
transition: transform 0.5s;
transform-origin: top left;
}
.box:hover {
transform: scale(1.5);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
GO TO FULL VERSION