Funktsiya rotate
Funktsiya rotate() elementni berilgan burchakka
aylantiradi. transform
xususiyati bilan birgalikda ishlatiladi.
Xususiyat qiymati har qanday burchak
oʻlchov birliklarida ifodalanishi mumkin. Musbat qiymat soat
millari yoʻnalishida, manfiy qiymat soat milliga teskari yoʻnalishda
aylantiradi. Aylanish transform-origin
xususiyati bilan belgilanadigan nuqta atrofida amalga oshiriladi.
Sintaksis
selector {
transform: rotate(burchak);
}
Misol
Ushbu misolda blok soat millari yoʻnalishida
30 gradusga aylantirilgan:
<div id="elem">lorem ipsum</div>
#elem {
transform: rotate(30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Misol
Ushbu misolda blok soat milliga teskari yoʻnalishda
30 gradusga aylantirilgan:
<div id="elem">lorem ipsum</div>
#elem {
transform: rotate(-30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Misol
Ushbu misolda blok sichqoncha olib oʻtilganda
1 marta aylanadi, chunki aylanish qiymati
1turn da berilgan (xuddi shu effektni
360deg aylanish burchagini berish orqali ham
erishish mumkin). Aylanishning silliqligi uchun
transition
xususiyati qoʻshilgan:
<div id="elem">lorem ipsum</div>
#elem {
border: 3px solid black;
width: 100px;
height: 50px;
transition: transform 3s linear;
}
#elem:hover {
transform: rotate(1turn);
}
:
