Función rotateZ
La función rotateZ especifica una rotación sobre el
eje 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 medida de ángulos. Un valor positivo rota
en el sentido de las agujas del reloj, uno negativo - en sentido contrario.
La rotación se realiza alrededor del punto definido por
la propiedad transform-origin.
Sintaxis
cssselector {
transform: rotateZ(ángulo);
}
Ejemplo
En este ejemplo, el bloque al pasar el cursor rotará
180 grados sobre el eje Z. Para una transición suave
de la rotación se añadió la propiedad transition:
html<div id="elem">lorem ipsum</div>css#elem {
border: 3px solid black;
width: 100px;
height: 50px;
transition: transform 3s linear;
}
#elem:hover {
transform: rotateZ(180deg);
}
Результат:
Ejemplo
Cambiemos el eje de rotación usando la propiedad
transform-origin:
html<div id="elem">lorem ipsum</div>css#elem {
border: 3px solid black;
width: 100px;
height: 50px;
transition: transform 3s linear;
transform-origin: center bottom;
}
#elem:hover {
transform: rotateZ(180deg);
}
Результат: