Função rotate
A função rotate() define a rotação de um elemento
por um determinado ângulo. É usada em conjunto
com a propriedade transform.
O valor da propriedade é um ângulo em qualquer unidade
de ângulo. Um valor positivo gira o elemento
no sentido horário, um negativo - no sentido anti-horário.
A rotação é realizada em torno de um ponto, definido pela
propriedade transform-origin.
Sintaxe
seletor {
transform: rotate(ângulo);
}
Exemplo
Neste exemplo, o bloco está girado em 30
graus no sentido horário:
<div id="elem">lorem ipsum</div>
#elem {
transform: rotate(30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Exemplo
Neste exemplo, o bloco está girado em 30
graus no sentido anti-horário:
<div id="elem">lorem ipsum</div>
#elem {
transform: rotate(-30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Exemplo
Neste exemplo, o bloco ao passar o mouse girará
em 1 volta, pois o valor da rotação é
definido em 1turn (o mesmo efeito pode ser alcançado
definindo o ângulo de rotação como 360deg). Para
uma rotação suave, a propriedade
transition foi adicionada:
<div id="elem">lorem ipsum</div>
#elem {
border: 3px solid black;
width: 100px;
height: 50px;
transition: transform 3s linear;
}
#elem:hover {
transform: rotate(1turn);
}
:
