rotate කාර්යය
rotate() කාර්යය මූලද්රව්යයක් නිශ්චිත කෝණයකින්
භ්රමණය කරයි. transform
ගුණය සමඟ එක්ව භාවිතා කරයි.
ගුණයේ අගය වන්නේ ඕනෑම කෝණ ඒකක වලින් කෝණයකි.
ධනාත්මක අගයක් ඔරලෝසු දිශාවට භ්රමණය කරයි,
ඍණාත්මක අගයක් - ප්රතිවිරුද්ධ දිශාවට.
භ්රමණය සිදුවන්නේ transform-origin
ගුණය මගින් නියම කරන ලද ලක්ෂ්යය වටා ය.
වාක්ය රචනය
තේරීමක් {
transform: rotate(කෝණය);
}
නිදසුන
මෙම නිදසුනේ, බ්ලොක් එක භ්රමණය වී ඇත්තේ 30
අංශක වශයෙන් ඔරලෝසු දිශාවට ය:
<div id="elem">lorem ipsum</div>
#elem {
transform: rotate(30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
නිදසුන
මෙම නිදසුනේ, බ්ලොක් එක භ්රමණය වී ඇත්තේ 30
අංශක වශයෙන් ඔරලෝසු දිශාවට ප්රතිවිරුද්ධව ය:
<div id="elem">lorem ipsum</div>
#elem {
transform: rotate(-30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
නිදසුන
මෙම නිදසුනේ, බ්ලොක් එක hover කිරීමේදී භ්රමණය වනු ඇත
1 වතාවක්, මන්ද භ්රමණයේ අගය
1turn වශයෙන් ලබා දී ඇත (එම ආචරණයම ලබා ගත හැක,
භ්රමණ කෝණය 360deg වශයෙන් නියම කළහොත්).
භ්රමණය සුමට කිරීම සඳහා එකතු කර ඇත
transition ගුණය:
<div id="elem">lorem ipsum</div>
#elem {
border: 3px solid black;
width: 100px;
height: 50px;
transition: transform 3s linear;
}
#elem:hover {
transform: rotate(1turn);
}
:
