rotateX funksiyası

rotateX funksiyası üçölçülü fəzada X oxu ətrafında fırlanma təyin edir. transform xassəsi ilə birlikdə istifadə olunur. Xassənin qiyməti hər hansı bucaq vahidləri ilə ifadə olunan bucaqdır. Müsbət qiymət bizə doğru, mənfi qiymət isə bizdən uzağa doğru fırlanma yaradır. Fırlanma transform-origin xassəsi ilə təyin olunan nöqtə ətrafında baş verir.

Sintaksis

cssselektor {
  transform: rotateX(bucaq);
}

Nümunə

Bu nümunədə blok üzərinə gəldikdə X oxu ətrafında 180 dərəcə fırlanacaq. 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: rotateX(180deg);
}

Результат:

Nümunə

transform-origin xassəsi ilə fırlanma oxunu 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: center bottom;
}
#elem:hover {
  transform: rotateX(180deg);
}

Результат:

Nümunə

Mənfi bucaq təyin edək:

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

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

Результат:

Həmçinin bax