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

cssseletor {
  transform: rotate3d(X, Y, Z, ângulo);
}

Exemplo

Neste exemplo, o vetor do eixo será direcionado para o canto superior direito da tela:

html<div id="elem">lorem ipsum</div>

css#elem {
  border: 3px solid black;
  width: 100px;
  height: 50px;
  transition: transform 3s linear;
}
#elem:hover {
  transform: rotate3d(1, 1, 0, 180deg);
}

Результат:

Veja também