1.1 Właściwość transform
Transformacje CSS pozwalają na modyfikację położenia, rozmiaru, obrotu i pochylania elementów bez zmiany ich zwykłego przepływu w dokumencie. To potężne narzędzie do tworzenia interaktywnych i dynamicznych interfejsów webowych. Przyjrzyjmy się podstawom transformacji z wykorzystaniem właściwości transform, translate, rotate, scale i skew.
Właściwość transform pozwala na zastosowanie dwu- i trójwymiarowych transformacji do elementów. Łączy różne funkcje transformacji, takie jak translate, rotate, scale i skew.
Składnia:
element {
transform: transformation-function;
}
Gdzie:
transformation-function: funkcja transformacji stosowana do elementu
Przykład użycia:
.element {
transform: translate(50px, 100px);
}
1.2 Transformacja translate
Transformacja translate jest używana do przesuwania elementu wzdłuż osi X i/lub Y.
Składnia:
element {
transform: translate(x, y);
}
Gdzie:
x: przesunięcie wzdłuż osi X (może być ujemne lub dodatnie)y: przesunięcie wzdłuż osi Y (może być ujemne lub dodatnie)
Przykład:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Transformacja translate</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>
Wyjaśnienie kodu:
.box: element o stałych wymiarach i kolorze.box:hover: po najechaniu kursorem na element stosuje się transformacjętranslate(50px, 50px), przesuwającą go o 50 pikseli w prawo i w dół
1.3 Transformacja rotate
Transformacja rotate służy do obrotu elementu wokół jego środka.
Składnia:
element {
transform: rotate(angle);
}
Gdzie:
angle: kąt obrotu w stopniach (może być ujemny lub dodatni)
Przykład:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Transformacja rotate</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>
Wyjaśnienie kodu:
.box: element o stałych wymiarach i kolorze.box:hover: po najechaniu kursorem na element stosuje się transformacjęrotate(45deg), obracającą go o 45 stopni zgodnie z ruchem wskazówek zegara
1.4 Transformacja scale
Transformacja scale służy do zmiany rozmiaru elementu wzdłuż osi X i/lub Y.
Składnia:
element {
transform: scale(sx, sy);
}
Gdzie:
sx: skalowanie wzdłuż osi X (wartość większa od 1 powiększa element, mniejsza od 1 zmniejsza)sy: skalowanie wzdłuż osi Y (wartość większa od 1 powiększa element, mniejsza od 1 zmniejsza)
Przykład:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Transformacja scale</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>
Wyjaśnienie kodu:
.box: element o stałych wymiarach i kolorze-
.box:hover: po najechaniu kursorem na element stosuje się transformacjęscale(1.5, 1.5), powiększającą jego rozmiar 1.5-krotnie w obu osiach
1.5 Transformacja skew
Transformacja skew służy do pochylenia elementu wzdłuż osi X i/lub Y.
Składnia:
element {
transform: skew(ax, ay);
}
Gdzie:
ax: kąt nachylenia wzdłuż osi X (może być ujemny lub dodatni)ay: kąt nachylenia wzdłuż osi Y (może być ujemny lub dodatni)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Transformacja skew</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>
Wyjaśnienie kodu:
.box: element o stałych wymiarach i kolorze..box:hover: po najechaniu kursorem na element stosuje się transformacjęskew(20deg, 10deg), pochylającą go o 20 stopni wzdłuż osi X i 10 stopni wzdłuż osi Y.
1.6 Łączenie różnych transformacji
Właściwość transform pozwala na łączenie kilku funkcji transformacji, aby osiągnąć złożone efekty.
Przykład:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Łączone transformacje</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>
Wyjaśnienie kodu:
.box: element o stałych wymiarach i kolorze.box:hover: po najechaniu kursorem na element jednocześnie stosuje się transformacjetranslate,rotate,scaleiskew, tworząc złożony efekt
GO TO FULL VERSION