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
selektor {
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:
<div id="elem">lorem ipsum</div>
#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:
<div id="elem">lorem ipsum</div>
#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:
<div id="elem">lorem ipsum</div>
#elem {
border: 3px solid black;
width: 100px;
height: 50px;
transition: transform 3s linear;
transform-origin: center bottom;
}
#elem:hover {
transform: rotateX(-180deg);
}
:
