Funksiya rotateZ
rotateZ funksiyası uc olculu fəzada
Z oxuna nisbətən fırlanma təyin edir.
transform xassəsi ilə birlikdə istifadə olunur.
Xassənin qiyməti hər hansı bucaq vahidlərində olur. Müsbət qiymət saat əqrəbi istiqamətində,
mənfi qiymət isə əksinə fırlanma yaradır.
Fırlanma transform-origin xassəsi ilə təyin olunan nöqtə ətrafında həyata keçirilir.
Sintaksis
selektor {
transform: rotateZ(bucaq);
}
Nümunə
Bu nümunədə blok üzərinə gəldikdə
Z oxu ətrafinda 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: rotateZ(180deg);
}
:
Nümunə
transform-origin xassəsindən istifadə edərək
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: rotateZ(180deg);
}
:
