Funcția rotate3d

Funcția rotate3d definește rotirea elementului la un unghi dat simultan relativ la axele X, Y, Z în spațiul tridimensional. Este utilizată împreună cu proprietatea transform. Valoarea proprietății este un unghi în orice unitate de măsură pentru unghiuri.

Ca valori, funcția acceptă 4 parametri, scriși prin virgulă. Primii trei parametri definesc vectorul axei în spațiul tridimensional, relativ la care va fi efectuată rotația. Al patrulea parametru definește unghiul de rotație.

Sintaxă

cssselector {
  transform: rotate3d(X, Y, Z, unghi);
}

Exemplu

În acest exemplu, vectorul axei va fi îndreptat în colțul din dreapta sus al ecranului:

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);
}

Результат:

Veți și