A rotate függvény
A rotate() függvény egy adott szöggel
elforgatja az elemet. A transform
tulajdonsággal együtt használható.
Értéke egy szög, amely bármilyen szögegységben
megadható. A pozitív érték az óramutató járásával megegyező,
a negatív pedig azzal ellentétes irányba forgat.
Az elforgatás a transform-origin
tulajdonsággal megadott pont körül történik.
Szintaxis
szelektor {
transform: rotate(szög);
}
Példa
Ebben a példában a blokk 30 fokkal
van elforgatva az óramutató járásával megegyező irányba:
<div id="elem">lorem ipsum</div>
#elem {
transform: rotate(30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Példa
Ebben a példában a blokk 30 fokkal
van elforgatva az óramutató járásával ellentétes irányba:
<div id="elem">lorem ipsum</div>
#elem {
transform: rotate(-30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Példa
Ebben a példában a blokk rámutatáskor 1
fordulattal el fog fordulni, mivel az elforgatás értéke
1turn-ben van megadva (ugyanazt az eredményt éri el,
ha az elforgatási szöget 360deg-ban adja meg).
Az elforgatás simasága érdekében a
transition
tulajdonság lett hozzáadva:
<div id="elem">lorem ipsum</div>
#elem {
border: 3px solid black;
width: 100px;
height: 50px;
transition: transform 3s linear;
}
#elem:hover {
transform: rotate(1turn);
}
:
