rotate3d funksiyası

rotate3d funksiyası elementi üçölçülü fəzada X, Y, Z oxlarına nisbətən eyni anda müəyyən edilmiş bucağa fırladır. transform xassəsi ilə birlikdə istifadə olunur. Xassənin qiyməti kimi bucaqlar üçün istənilən vahidlər qəbul edilir.

Funksiya qiymət kimi vergüllə ayrılmış 4 parametr qəbul edir. İlk üç parametr fırlanmanın baş verdiyi üçölçülü fəzadakı ox vektorunu müəyyən edir. Dördüncü parametr isə fırlanma bucağını təyin edir.

Sintaksis

cssselektor {
  transform: rotate3d(X, Y, Z, bucaq);
}

Nümunə

Bu nümunədə ox vektoru ekranın yuxarı sağ küncünə yönəlmiş olacaq:

html<div id="elem">lorem ipsum</div>
css#elem {
  border: 3px solid black;
  width: 100px;
  height: 50px;
  transition: transform 3s linear;
}
#elem:hover {
  transform: rotate3d(1, 1, 0, 180deg);
}

Результат:

Həmçinin bax

  • rotate funksiyası,
    X və Y oxları üzrə fırlanma təyin edir
  • rotateX funksiyası,
    X oxu üzrə fırlanma təyin edir
  • rotateY funksiyası,
    Y oxu üzrə fırlanma təyin edir
  • rotateZ funksiyası,
    Z oxu üzrə fırlanma təyin edir