3.1 Podstawy kombinowanych transformacji
CSS daje możliwość łączenia kilku transformacji do tworzenia skomplikowanych efektów wizualnych.
Te transformacje mogą zawierać translate, rotate, scale i skew,
które można połączyć w jednym atrybucie transform.
Atrybut transform może zawierać kilka funkcji transformacji oddzielonych spacjami. Będą one stosowane
kolejno, w podanej kolejności. Zrozumienie, jak różne transformacje oddziałują ze sobą,
jest kluczem do tworzenia skomplikowanych animacji i efektów.
Składnia:
element {
transform: function1() function2() ... functionN();
}
Przykład:
element {
transform: translate(20px, 20px) rotate(45deg) scale(1.5) skew(10deg, 5deg);
}
Przesuwanie i obrót
W tym przykładzie element przesuwa się o 50 pikseli w prawo i w dół, a następnie obraca o 45 stopni.
Przykład:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Przesuwanie i obrót</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>
Wyjaśnienie kodu:
.box: element najpierw przesuwa się o 50 pikseli w prawo i w dół, a następnie obraca o 45 stopni zgodnie z ruchem wskazówek zegara
3.2 Analiza różnych kombinacji
1. Skalowanie i pochylanie
W tym przykładzie element jest skalowany 1.5 razy wzdłuż obu osi, a następnie pochylany o 20 stopni w osi X i 10 stopni w osi Y.
Przykład:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Skalowanie i pochylanie</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>
Wyjaśnienie kodu:
.box: element najpierw skalowany jest 1.5 razy wzdłuż obu osi, a następnie pochylany o 20 stopni w osi X i 10 stopni w osi Y
2. Przesuwanie, obrót i skalowanie
W tym przykładzie element przesuwa się o 100 pikseli w prawo, obraca o 30 stopni i skalowany jest 2 razy w osi X i 1.5 razy w osi Y.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Przesuwanie, obrót i skalowanie</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>
Wyjaśnienie kodu:
-
.box: element najpierw przesuwa się o 100 pikseli w prawo, następnie obraca o 30 stopni i skalowany jest 2 razy w osi X i 1.5 razy w osi Y
3.3 Wpływ kolejności transformacji
Kiedy kilka transformacji jest łączonych, ważne jest zrozumienie, że są one stosowane w kolejności. Oznacza to, że każda kolejna transformacja wpływa na wynik poprzedniej.
W tym przykładzie pokazano, jak zmiana kolejności transformacji wpływa na ostateczny wynik.
Przykład A: najpierw obrót, potem przesunięcie
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Najpierw obrót, potem przesunięcie</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>
Przykład B: najpierw przesunięcie, potem obrót
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Najpierw przesunięcie, potem obrót</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>
Wyjaśnienie kodu:
-
.box-a: element najpierw obraca się o 45 stopni, a następnie przesuwa o 50 pikseli w prawo i w dół, co sprawia, że przesuwa się po przekątnej z nowego położenia po obrocie -
.box-b: element najpierw przesuwa się o 50 pikseli w prawo i w dół, a następnie obraca o 45 stopni, co sprawia, że obraca się względem nowego położenia
GO TO FULL VERSION