CSS: Crear Animación Flip

Las Animaciones CSS son muy divertidas; la belleza de ellas es que son propiedades simples, puede crear cualquier cosa, desde un elegante fundido de entrada(FADE) a un efecto de Pixar. Uno de los efectos CSS es sin lugar a duda el efecto Flip CSS, colocando un contenido en la parte frontal y trasero en un mismo contenedor. Este tutorial te mostrará como crear ese efecto de la manera más sencilla posible.

EL HTML

La estructura HTML para lograr el efecto de dos caras es algo como esto:

<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
	<div class="flipper">
		<div class="front">
			<!-- contenido frontal -->
		</div>
		<div class="back">
			<!-- contenido trasero -->
		</div>
	</div>
</div>

Hay dos paneles de contenido, «delante» y «atrás», pero también dos elementos que contienen reglas específicas de CSS. También tenga en cuenta la función  ontouchstart  que permite a los paneles interactuar con pantallas táctiles. Obviamente usted debe codificar ese código en un bloque separado, en un bloque JavaScript no intrusivo si lo desea.

EL CSS

Aqui esta el bloque de codigo de CSS que esta involucrado con este efecto, que la verdad sorprendentemente es muy poco.

/* un solo contenedor, mantiene perspectiva */
.flip-container {
	perspective: 1000;
}
	/* voltea el panel al colocar el mouse(HOVER) */
	.flip-container:hover .flipper, .flip-container.hover .flipper {
		transform: rotateY(180deg);
	}

.flip-container, .front, .back {
	width: 320px;
	height: 480px;
}

/* velocidad del flip aqui */
.flipper {
	transition: 0.6s;
	transform-style: preserve-3d;
	position: relative;
}

/* oculta el panel posterior durante el cambio */
.front, .back {
	backface-visibility: hidden;
	position: absolute;
	top: 0;
	left: 0;
}

/* panel frontal, enviado atras */
.front {
	z-index: 2;
	/* for firefox 31 */
	transform: rotateY(0deg);
}

/* detras,inicialmente el panel oculto */
.back {
	transform: rotateY(180deg);
}

He aquí explicamos el proceso:

• El contenedor externo se establece como toda el área de animación (perspective)
• El recipiente interior es el elemento que realmente voltea, girando 180 grados cuando el el cursor se colocaca sobre el contenedor padre. Esto también es controlado por la velocidad de transición. Cambiando la rotación hacia -180deg hace girar los elementos en la dirección inversa.
• Los elementos frontales y traseros se posicionados absolutamente para que puedan «superponerse» (overlay) entre sí en la misma posición; su cara posterior-cara visible está oculto por lo que la parte posterior de los elementos volteados no se muestran durante la animación
• El elemento frontal tiene un mayor z-index que el elemento trasero por lo que el elemento frontal puede ser codificada primero pero sigue mostrándose en la parte superior
• El elemento de espalda se gira 180 grados, a fin de actuar como la parte posterior.

Eso es realmente todo lo que hay que hacer! Ponga esta estructura simple en su lugar y luego el estilo donde lo desee!

CSS Flip Toggle

Si prefiere voltear un único elemento mediante un JavaScript, una simple clase CSS hará el truco, podríamos lograrlo de esta forma:

.flip-container:hover .flipper, .flip-container.hover .flipper, .flip-container.flip .flipper {
	transform: rotateY(180deg);

Añadiendo la clase FLIP al contenedor principal le dara vuelta a la tarjeta mediante Javascript, sin requerir el evento hover por el usuario(colocar el mouse sobre la imagen), El codigo seria algo como esto:

onclick="document.querySelector('#flip-toggle').classList.toggle('hover');"

CSS Flip Vertical

Realizar un flip vertical es tan fácil como cambiar el eje y añadiendo a la propiedad transform-origin el valor del eje. El Flip original solo debe actualizarce y la tarjeta girara de otra manera:

.vertical.flip-container {
	position: relative;
}

	.vertical .back {
		transform: rotateX(180deg);
	}

	.vertical.flip-container .flipper {
		transform-origin: 100% 213.5px; /* half of height */
	}

	.vertical.flip-container:hover .flipper {
		transform: rotateX(-180deg);
	}

Te podras dar cuenta que se usa X en vez de la Y.

Soporte para Internet Explorer

Internet Explorer requiere modificaciones importantes en el código flip estándar debido a que aún no ha implementado todas las propiedades modernas de transform.Esencialmente tanto los elementos frontal y posterior tienen que voltearse al mismo tiempo:

/* contenedor principal, keeps perspective */
.flip-container {
	perspective: 1000;
	transform-style: preserve-3d;
}
	/*  UPDATED! flip the pane when hovered */
	.flip-container:hover .back {
		transform: rotateY(0deg);
	}
	.flip-container:hover .front {
	    transform: rotateY(180deg);
	}

.flip-container, .front, .back {
	width: 320px;
	height: 480px;
}

/* velocidad del flip aqui */
.flipper {
	transition: 0.6s;
	transform-style: preserve-3d;

	position: relative;
}

/* oculta el panel posterior durante el cambio */
.front, .back {
	backface-visibility: hidden;
	transition: 0.6s;
	transform-style: preserve-3d;

	position: absolute;
	top: 0;
	left: 0;
}

/*  ACTUALIZA! el panel frontal, colocandolo por encima */
.front {
	z-index: 2;
	transform: rotateY(0deg);
}

/* atras, panel inicialmente oculto */
.back {
	transform: rotateY(-180deg);
}

/*
	algunas actualizaciones del flip vertical
*/
.vertical.flip-container {
	position: relative;
}

	.vertical .back {
		transform: rotateX(180deg);
	}

	.vertical.flip-container:hover .back {
	    transform: rotateX(0deg);
	}

	.vertical.flip-container:hover .front {
	    transform: rotateX(180deg);
	}

Con el codigo anterior, el Flip en IE10 funcionara muy bien.

VER DEMO