Función rotateY

La función rotateY define una rotación relativa al eje Y 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. Un valor positivo gira el elemento hacia nosotros, uno negativo - alejándose de nosotros. La rotación se realiza alrededor del punto definido por la propiedad transform-origin.

Sintaxis

selector {
	transform: rotateY(ángulo);
}

Ejemplo

En este ejemplo, el bloque al pasar el cursor girará 180 grados alrededor del eje Y. Para una transición suave de la rotación, se añadió la propiedad transition:

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

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

Ejemplo

Cambiemos el eje de rotación usando la propiedad transform-origin:

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

#elem {
	border: 3px solid black;
	width: 100px;
	height: 50px;
	transition: transform 3s linear;
	transform-origin: right center;
}
#elem:hover {
	transform: rotateY(180deg);
}

Véase también

la función rotate,
que define una rotación alrededor de los ejes X e Y
la función rotateX,
que define una rotación alrededor del eje X
la función rotateZ,
que define una rotación alrededor del eje Z
la función rotate3d,
que define una rotación alrededor de los tres ejes