2.1 transform-origin Xüsusiyyəti
transform-origin CSS-də transformasiyaların, məsələn, rotate, scale, skew və translate tətbiq edildiyi nöqtəni təyin edir. Susmaya görə bu nöqtə elementin mərkəzində yerləşir, amma onu dəyişərək lazım olan vizual effektlər əldə edə bilərsiniz.
transform-origin əsasları
transform-origin xüsusiyyətinin sintaksisi:
element {
transform-origin: x-axis y-axis z-axis;
}
Bunların harada:
x-axis: üfüqi ox boyunca nöqtənin yerini təyin ediry-axis: şaquli ox boyunca nöqtənin yerini təyin edirz-axis: Z oxu boyunca nöqtənin yerini təyin edir (3D-transformasiyalar üçün istifadə olunur)
Mümkün dəyərlər:
- Açar sözlər:
top,right,bottom,left,center - Faiz dəyərləri: elementi ölçüsünə görə mənşə nöqtəsini faizlə ifadə edir
- Mütləq dəyərlər: mənşə nöqtəsini piksel və ya digər ölçü vahidləri ilə təyin edir
Dəyərlərin nümunələri:
transform-origin: 50% 50%;— elementin mərkəzi (susmaya görə olan dəyər)transform-origin: 0 0;— elementin sol üst küncütransform-origin: 100% 100%;— elementin sağ alt küncütransform-origin: 50px 100px;— elementin sol üst küncündən sağa 50 piksel və aşağıya 100 piksel uzaqlıq
Mənşə nöqtəsinin mərkəzləşdirilməsi (susmaya görə)
Bu nümunədə rotate transformasiyası elementin mərkəzi ətrafında olacaq.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mənşə nöqtəsinin mərkəzləşdirilməsi</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #3498db;
transform: rotate(45deg);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
2.2 Nöqtənin Yerdəyişməsi
Başlanğıc nöqtəsinin sol yuxarı küncə yerdəyişməsi
Bu nümunədə transformasiya başlanğıc nöqtəsi elementin sol yuxarı küncünə köçürülür.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Başlanğıc nöqtəsi sol yuxarı küncdə</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>
Başlanğıc nöqtəsinin sağ aşağı küncə yerdəyişməsi
Bu nümunədə transformasiya başlanğıc nöqtəsi elementin sağ aşağı küncünə köçürülür.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Başlanğıc nöqtəsi sağ aşağı küncdə</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 Dəyərlərin təyin olunması
Faiz dəyərlərdən istifadə
Bu nümunədə transformasiyanın başlanğıc nöqtəsi üfüqi istiqamətdə 25% və şaquli istiqamətdə 75% yerləşir.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Faiz dəyərləri ilə başlanğıc nöqtəsi</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>
Absolyut dəyərlərdən istifadə
Bu nümunədə transformasiyanın başlanğıc nöqtəsi üfüqi istiqamətdə 50 piksel və şaquli istiqamətdə 20 pikselə doğru yerdəyişmə edir.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Absolyut dəyərləri ilə başlanğıc nöqtəsi</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 Praktiki tətbiq
Elementin müəyyən nöqtə ətrafında fırlanması
transform-origin-dən istifadə etmək, müəyyən nöqtə ətrafında fırlanmalı olan elementlər yaratmaq üçün faydalıdır. Məsələn, saat əqrəbinin yaradılması.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Saat əqrəbinin fırlanması</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); /* 1 saat mövqeyi üçün nümunə */
}
</style>
</head>
<body>
<div class="clock">
<div class="hand hour-hand"></div>
</div>
</body>
</html>
Müqyaslana bilən elementin yaradılması
Mənşə nöqtəsinin dəyişdirilməsi, elementləri müxtəlif nöqtələrə görə miqyaslandırmaq üçün də faydalıdır. Bu, dinamik interfeyslərin yaradılması üçün yararlıdır.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Miqyası dəyişən 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