2.1 Właściwość transform-origin
Właściwość transform-origin w CSS określa punkt, względem którego są stosowane transformacje, takie jak rotate, scale, skew, i translate. Domyślnie ten punkt znajduje się w centrum elementu, ale możesz zmienić jego położenie, by osiągnąć żądane efekty wizualne.
Podstawy transform-origin
Składnia właściwości transform-origin:
element {
transform-origin: x-axis y-axis z-axis;
}
Gdzie:
x-axis: określa położenie punktu na osi poziomejy-axis: określa położenie punktu na osi pionowejz-axis: określa położenie punktu na osi Z (używane dla transformacji 3D)
Możliwe wartości:
- Słowa kluczowe:
top,right,bottom,left,center - Wartości procentowe: określają punkt pochodzenia w procentach od rozmiaru elementu
- Wartości absolutne: określają punkt pochodzenia w pikselach lub innych jednostkach miary
Przykłady wartości:
transform-origin: 50% 50%;— centrum elementu (wartość domyślna)transform-origin: 0 0;— lewy górny róg elementutransform-origin: 100% 100%;— prawy dolny róg elementutransform-origin: 50px 100px;— przesunięcie o 50 pikseli w prawo i 100 pikseli w dół od lewego górnego rogu
Centrowanie punktu pochodzenia (domyślnie)
W tym przykładzie transformacja rotate będzie zachodzić wokół centrum elementu.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Centrowanie punktu pochodzenia</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #3498db;
transform: rotate(45deg);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
2.2 Przesunięcie punktu
Przesunięcie punktu pochodzenia do lewego górnego rogu
W tym przykładzie punkt pochodzenia transformacji został przesunięty do lewego górnego rogu elementu.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Punkt pochodzenia w lewym górnym rogu</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>
Przesunięcie punktu pochodzenia do prawego dolnego rogu
W tym przykładzie punkt pochodzenia transformacji został przesunięty do prawego dolnego rogu elementu.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Punkt pochodzenia w prawym dolnym rogu</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 Definiowanie wartości
Użycie wartości procentowych
W tym przykładzie punkt pochodzenia transformacji znajduje się na 25% w poziomie i 75% w pionie.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Punkt pochodzenia z wartościami procentowymi</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>
Użycie wartości absolutnych
W tym przykładzie punkt pochodzenia transformacji został przesunięty o 50 pikseli w poziomie i 20 pikseli w pionie.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Punkt pochodzenia z wartościami absolutnymi</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 Praktyczne zastosowanie
Obrót elementu wokół konkretnego punktu
Użycie transform-origin jest przydatne do tworzenia obrotowych elementów, które powinny obracać się wokół określonego punktu. Na przykład tworzenie wskazówki zegara.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Obrót wskazówki zegara</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); /* Przykład dla pozycji na 1 godzinę */
}
</style>
</head>
<body>
<div class="clock">
<div class="hand hour-hand"></div>
</div>
</body>
</html>
Stworzenie skalowalnego elementu
Zmiana punktu pochodzenia jest również użyteczna dla skalowania elementów względem różnych punktów, co może być przydatne dla tworzenia dynamicznych interfejsów.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Skalowalny 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