Funcția rotate
Funcția rotate() stabilește rotirea elementului
cu un unghi dat. Este utilizată împreună
cu proprietatea transform.
Valoarea proprietății este un unghi în orice unitate
de măsură pentru unghiuri. O valoare pozitivă rotește
în sensul acelor de ceasornic, una negativă - în sens invers.
Rotirea se efectuează în jurul punctului definit de
proprietatea transform-origin.
Sintaxă
selector {
transform: rotate(unghi);
}
Exemplu
În acest exemplu, blocul este rotit cu 30
grade în sensul acelor de ceasornic:
<div id="elem">lorem ipsum</div>
#elem {
transform: rotate(30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Exemplu
În acest exemplu, blocul este rotit cu 30
grade în sens invers acelor de ceasornic:
<div id="elem">lorem ipsum</div>
#elem {
transform: rotate(-30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Exemplu
În acest exemplu, blocul la hover se va roti
cu 1 rotație, deoarece valoarea rotației
este dată în 1turn (același efect poate fi obținut
dacă unghiul de rotație este setat la 360deg). Pentru
o rotire lină a fost adăugată proprietatea
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);
}
:
