Funksiya rotateY

rotateY funksiyası üçölçülü fəzada Y oxu ətrafinda fırlanma təyin edir. transform xüsusiyyəti ilə birlikdə istifadə olunur. Xüsusiyyətin dəyəri istənilən bucaq vahidində verilə bilər. Müsbət dəyər bizə doğru, mənfi dəyər bizdən uzağa doğru fırlanma təmin edir. Fırlanma transform-origin xüsusiyyəti ilə təyin olunan nöqtə ətrafinda həyata keçirilir.

Sintaksis

cssselektor {
  transform: rotateY(bucaq);
}

Nümunə

Bu nümunədə blok üzərinə gəlinmə ilə Y oxu üzrə 180 dərəcə fırlanacaq. Fırlanmanın hamarlığı üçün transition xüsusiyyəti əlavə edilib:

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

css#elem {
  border: 3px solid black;
  width: 100px;
  height: 50px;
  transition: transform 3s linear;
}
#elem:hover {
  transform: rotateY(180deg);
}

Результат:

Nümunə

Fırlanma oxunu transform-origin xüsusiyyəti ilə dəyişək:

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

css#elem {
  border: 3px solid black;
  width: 100px;
  height: 50px;
  transition: transform 3s linear;
  transform-origin: right center;
}
#elem:hover {
  transform: rotateY(180deg);
}

Результат:

Həmçinin bax