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

cssselektor {
  transform: rotate(bucaq);
}

Nümunə

Bu nümunədə blok saat əqrəbi istiqamətində 30 dərəcə fırlanıb:

html<div id="elem">lorem ipsum</div>

css#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:

html<div id="elem">lorem ipsum</div>

css#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:

html<div id="elem">lorem ipsum</div>

css#elem {
  border: 3px solid black;
  width: 100px;
  height: 50px;
  transition: transform 3s linear;
}
#elem:hover {
  transform: rotate(1turn);
}

Результат:

Həmçinin bax