Funkcija rotate
Funkcija rotate() nustato elemento pasukimą
tam tikru kampu. Naudojama kartu
su savybe transform.
Reikšmė yra kampas bet kokiame kampų
vienete. Teigiama reikšmė sukasi
pagal laikrodžio rodyklę, neigiama - prieš.
Pasukimas atliekamas aplink tašką, nustatytą
savybės transform-origin.
Sintaksė
selektorius {
transform: rotate(kampas);
}
Pavyzdys
Šiame pavyzdyje blokas pasuktas 30
laipsnių pagal laikrodžio rodyklę:
<div id="elem">lorem ipsum</div>
#elem {
transform: rotate(30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Pavyzdys
Šiame pavyzdyje blokas pasuktas 30
laipsnių prieš laikrodžio rodyklę:
<div id="elem">lorem ipsum</div>
#elem {
transform: rotate(-30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Pavyzdys
Šiame pavyzdyje blokas užvedus pelę pasisuks
1 apsisukimą, nes pasukimo reikšmė
nustatyta 1turn (tokį patį efektą galima pasiekti,
jei nustatytumėte pasukimo kampą 360deg). Kad
pasukimas būtų sklandus, pridėta savybė
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);
}
:
