Propriedade transform
A propriedade transform define transformações
de um elemento, tais como rotação,
escala,
inclinação,
translação
e outras. As transformações correspondentes são escritas
separadas por espaço:
seletor {
transform: rotate(30deg) scale(3);
}
Exemplo
Neste exemplo, o bloco está rotacionado 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, além da rotação, foi adicionada também uma inclinação:
<div id="elem">lorem ipsum</div>
#elem {
transform: rotate(30deg) skew(20deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Exemplo
Neste exemplo, além da rotação e da inclinação, foi adicionada uma mudança de escala:
<div id="elem">lorem ipsum</div>
#elem {
transform: rotate(30deg) skew(20deg) scale(2, 3);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
