Funksioni rotate
Funksioni rotate() vendos rrotullimin e një elementi
me një kënd të caktuar. Përdoret së bashku
me vetinë transform.
Vlera e vetisë është një kënd në çdo njësi
për kënde. Një vlerë pozitive rrotullon
në drejtim të akrepave të orës, një vlerë negative - në të kundërt.
Rrotullimi kryhet rreth pikës, e cila përcaktohet nga
vetia transform-origin.
Sintaksa
përzgjedhësi {
transform: rotate(këndi);
}
Shembull
Në këtë shembull, blloku është rrotulluar me 30
shkallë në drejtim të akrepave të orës:
<div id="elem">lorem ipsum</div>
#elem {
transform: rotate(30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Shembull
Në këtë shembull, blloku është rrotulluar me 30
shkallë në drejtim të kundërt të akrepave të orës:
<div id="elem">lorem ipsum</div>
#elem {
transform: rotate(-30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Shembull
Në këtë shembull, blloku kur vihet mbi do të rrotullohet
me 1 rrotullim, pasi vlera e rrotullimit
është vendosur në 1turn (i njëjti efekt mund të arrihet,
nëse vendosni këndin e rrotullimit në 360deg). Për
rrjedhshmërinë e rrotullimit është shtuar vetia
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);
}
:
