rotate funksiyası
rotate() funksiyası elementi müəyyən bucaq
dərəcəsində fırlanma təyin edir.
transform xassəsi ilə
birlikdə istifadə olunur. Xassənin qiyməti hər hansı bucaq
vahidlərində ifadə olunan bucaqdır. Müsbət qiymət saat
əqrəbi istiqamətində, mənfi qiymət isə saat əqrəbinin əksinə
fırlanma təyin edir. Fırlanma transform-origin
xassəsi ilə təyin olunan nöqtə ətrafında həyata keçirilir.
Sintaksis
selektor {
transform: rotate(bucaq);
}
Nümunə
Bu nümunədə blok saat əqrəbi istiqamətində 30
dərəcə fırlanıb:
<div id="elem">lorem ipsum</div>
#elem {
transform: rotate(30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Nümunə
Bu nümunədə blok saat əqrəbinin əksinə 30
dərəcə fırlanıb:
<div id="elem">lorem ipsum</div>
#elem {
transform: rotate(-30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Nümunə
Bu nümunədə blok üzərinə gəldikdə 1 dövrə
fırlanacaq, çünki fırlanma qiyməti 1turn olaraq
təyin olunub (eyni effekti 360deg bucaq qiyməti
təyin etməklə də əldə etmək olar). Fırlanmanın
hamarlığı üçün transition
xassəsi əlavə olunub:
<div id="elem">lorem ipsum</div>
#elem {
border: 3px solid black;
width: 100px;
height: 50px;
transition: transform 3s linear;
}
#elem:hover {
transform: rotate(1turn);
}
:
