1.1 transform xüsusiyyəti
CSS transformasiyaları elementlərin mövqeyini, ölçüsünü, döndürülməsini və əyilməsini dəyişdirməyə imkan verir, amma bunlar sənədin normal axınına təsir etmir. Bu, interaktiv və dinamik veb interfeyslər yaratmaq üçün əla bir vasitədir. Gəlin transform, translate, rotate, scale və skew xüsusiyyətlərindən istifadə edərək transformasiyaların əsaslarını öyrənək.
transform xüsusiyyəti elementlərə ikiölçülü və üçölçülü transformasiyalar tətbiq etməyə imkan verir. Bu, müxtəlif transformasiya funksiyalarını, məsələn, translate, rotate, scale və skew funksiyalarını birləşdirir.
Sintaksis:
element {
transform: transformation-function;
}
Harada:
transformation-function: elementə tətbiq olunan transformasiya funksiyası
İstifadə nümunəsi:
.element {
transform: translate(50px, 100px);
}
1.2 Transformasiya translate
translate transformasiyası elementin X və/və ya Y oxu üzrə hərəkət etdirilməsi üçün istifadə olunur.
Sintaksis:
element {
transform: translate(x, y);
}
Burada:
x: X oxu üzrə yer dəyişməsi (mənfi və ya müsbət ola bilər)y: Y oxu üzrə yer dəyişməsi (mənfi və ya müsbət ola bilər)
Nümunə:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Transformasiya 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>
Kodun izahı:
.box: sabit ölçülərə və rəngə malik element.box:hover: element üzərinə kursor gətirildikdətranslate(50px, 50px)transformasiyası tətbiq olunur, bu da onu 50 piksel sağa və aşağı hərəkət etdirir
1.3 rotate transformasiyası
rotate transformasiyası bir elementi mərkəzi ətrafında döndərmək üçün istifadə olunur.
Syntax:
element {
transform: rotate(angle);
}
Burada:
angle: döndürmə bucağı dərəcələrdə (mənfi və ya müsbət ola bilər)
Nümunə:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>rotate transformasiyası</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>
Kodun izahı:
.box: ölçüləri müəyyən olunmuş və rənglə boyanmış element.box:hover: elementin üzərinə siçan gətirildikdə,rotate(45deg)transformasiyası tətbiq olunur və element saat əqrəbi istiqamətində 45 dərəcə döndürülür
1.4 Scale transformasiyası
scale transformasiyası elementi X və/ya Y oxu üzrə ölçüsünü dəyişmək üçün istifadə olunur.
Sintaksis:
element {
transform: scale(sx, sy);
}
Burada:
sx: X oxu üzrə miqyas (1-dən böyük dəyər elementi böyüdür, 1-dən kiçik dəyər isə kiçildir)sy: Y oxu üzrə miqyas (1-dən böyük dəyər elementi böyüdür, 1-dən kiçik dəyər isə kiçildir)
Nümunə:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scale transformasiyası</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>
Kodun izahı:
.box: sabit ölçüsü və rəngi olan element-
.box:hover: elementə siçan işarəsi ilə yaxınlaşdıqda,scale(1.5, 1.5)transformasiyası tətbiq olunur, bu da elementi hər iki ox üzrə 1.5 dəfə böyüdür
1.5 Skew transformasiyası
skew transformasiyası elementin X və/ya Y oxu üzrə əyilməsini həyata keçirmək üçün istifadə olunur.
Sintaksis:
element {
transform: skew(ax, ay);
}
Burada:
ax: X oxu üzrə əyilmə bucağı (mənfi və ya müsbət ola bilər)ay: Y oxu üzrə əyilmə bucağı (mənfi və ya müsbət ola bilər)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Skew transformasiyası</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>
Kod İzalətməsi:
.box: sabit ölçülərə və rəngə malik element..box:hover: kursor elementin üzərinə gətiriləndəskew(20deg, 10deg)transformasiyası tətbiq edilir, bu da onu X oxu üzrə 20 dərəcə və Y oxu üzrə 10 dərəcə əyir.
1.6 Müxtəlif transformasiyaların birləşdirilməsi
transform xüsusiyyəti bir neçə transformasiya funksiyasını birləşdirdikdə mürəkkəb effektlər yaradır.
Nümunə:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Birləşdirilmiş transformasiyalar</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>
Kodun izahı:
.box: ölçüsü və rəngi dəqiq olan element.box:hover: kursor ilə elementin üzərinə gəldikdə, eyni andatranslate,rotate,scalevəskewtransformasiyaları tətbiq olunur və mürəkkəb effekt yaradılır
GO TO FULL VERSION