Função rotate3d
A função rotate3d define a rotação de um elemento
em um determinado ângulo simultaneamente em relação
aos eixos X, Y, Z no espaço tridimensional. É usada
em conjunto com a propriedade transform.
O valor da propriedade é um ângulo em qualquer unidade
de ângulos.
Como valores, a função aceita 4
parâmetros, escritos separados por vírgulas. Os primeiros
três parâmetros definem o vetor do eixo no espaço
tridimensional, em relação ao qual a
rotação será realizada. O quarto parâmetro
define o ângulo de rotação.
Sintaxe
seletor {
transform: rotate3d(X, Y, Z, ângulo);
}
Exemplo
Neste exemplo, o vetor do eixo será direcionado para o canto superior direito da tela:
<div id="elem">lorem ipsum</div>
#elem {
border: 3px solid black;
width: 100px;
height: 50px;
transition: transform 3s linear;
}
#elem:hover {
transform: rotate3d(1, 1, 0, 180deg);
}
:
