Función rotate3d
La función rotate3d establece la rotación de un elemento
en un ángulo determinado simultáneamente respecto a
los ejes X, Y, Z en el espacio tridimensional. Se utiliza
en conjunto con la propiedad transform.
El valor de la propiedad es un ángulo en cualquier unidad
de ángulos.
Como valores, la función acepta 4
parámetros, escritos separados por comas. Los primeros
tres parámetros definen el vector del eje en el espacio
tridimensional, respecto al cual se
llevará a cabo la rotación. El cuarto parámetro
establece el ángulo de rotación.
Sintaxis
selector {
transform: rotate3d(X, Y, Z, ángulo);
}
Ejemplo
En este ejemplo, el vector del eje estará dirigido hacia la esquina superior derecha de la pantalla:
<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);
}
:
