3.1 Kombinə edilmiş transformasiyaların əsasları
CSS bir neçə transformasiyanı birləşdirərək kompleks vizual effektlər yaratmağa imkan verir. Bu transformasiyalar translate, rotate, scale və skew-i əhatə edə bilər və onları transform xüsusiyyətində birləşdirmək olar.
Transform xüsusiyyəti bir neçə transformasiya funksiyasını boşluqlarla ayrılmış şəkildə ehtiva edə bilər. Onlar ardıcıllıqla, yazılma sırasına görə tətbiq ediləcək. Fərqli transformasiyaların bir-birinə necə təsir etdiyini anlamaq kompleks animasiyalar və effektlər yaratmaq üçün çox vacibdir.
Sintaksis:
element {
transform: function1() function2() ... functionN();
}
Nümunə:
element {
transform: translate(20px, 20px) rotate(45deg) scale(1.5) skew(10deg, 5deg);
}
Hərəkət və döndürmə
Bu nümunədə element sağa 50 piksel və aşağıya 50 piksel hərəkət edir, sonra isə 45 dərəcə döndürülür.
Nümunə:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hərəkət və döndürmə</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>
Kodun izahı:
.box: element əvvəlcə sağa və aşağıya 50 piksel hərəkət edir, sonra isə saat yönündə 45 dərəcə döndürülür
3.2 Müxtəlif kombinasiyaların təhlili
1. Miqyaslama və əyilmə
Bu nümunədə element həm X, həm də Y oxları üzrə 1.5 dəfə miqyaslanır, sonra isə X oxu üzrə 20 dərəcə, Y oxu üzrə isə 10 dərəcə əyilir.
Nümunə:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Miqyaslama və əyilmə</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>
Kod izahı:
.box: element əvvəlcə hər iki ox üzrə 1.5 dəfə miqyaslanır, daha sonra X oxu üzrə 20 dərəcə, Y oxu üzrə isə 10 dərəcə əyilir
2. Yerdəyişmə, döndürmə və miqyaslama
Bu nümunədə element sağa doğru 100 piksel yerini dəyişir, 30 dərəcə döndürülür və X oxu üzrə 2 dəfə, Y oxu üzrə isə 1.5 dəfə miqyaslanır.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Yerdəyişmə, döndürmə və miqyaslama</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>
Kod izahı:
-
.box: element əvvəlcə sağa doğru 100 piksel yerini dəyişir, sonra 30 dərəcə döndürülür və X oxu üzrə 2 dəfə, Y oxu üzrə isə 1.5 dəfə miqyaslanır
3.3 Transformasiyaların sırası təsiri
Bir neçə transformasiya birləşdirildikdə, onların ardıcıl tətbiq olunduğunu anlamaq vacibdir. Bu o deməkdir ki, hər bir növbəti transformasiya əvvəlkinin nəticəsinə təsir edəcək.
Bu nümunədə transformasiyaların sırasının son nəticəyə necə təsir etdiyi göstərilir.
Nümunə A: əvvəlcə dönmə, sonra hərəkət
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Əvvəlcə dönmə, sonra hərəkət</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>
Nümunə B: əvvəlcə hərəkət, sonra dönmə
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Əvvəlcə hərəkət, sonra dönmə</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>
Kodun izahı:
-
.box-a: element əvvəlcə 45 dərəcə dönür, sonra isə sağa və aşağı 50 piksel hərəkət edir, bu da elementin dönmədən sonra yeni mövqeyindən diaqonal olaraq hərəkət etməsinə səbəb olur -
.box-b: element əvvəlcə sağa və aşağı 50 piksel hərəkət edir, sonra isə 45 dərəcə dönür, bu da elementin yeni mövqeyindən dönməsinə səbəb olur
GO TO FULL VERSION