CSS 3D Transforms

The HTML Markup

<div class="container">
	<div class="box-front">
		Hover me to view my back side
	</div>
	<div class="box-back">
		Hover out me to view my front side
	</div>
</div>

The CSS

<style>
.container{
		/* How pronounced should the 3D effects be */
		perspective: 800px;
		-webkit-perspective: 800px;
		background: radial-gradient(#e0e0e0, #aaa);
		width:100%;
		height:300px;
		border-radius:6px;
		position:relative;
		}
.box-front,
		.box-back{
 		/* Enable 3D transforms */
		transform-style: preserve-3d;
		-webkit-transform-style: preserve-3d;
		 backface-visibility: hidden;
		-webkit-backface-visibility: hidden;
		 width:50%;
		height:80%;
		position:absolute;
		top:10%;
		left:25%;
		background:#476AF1;
 		/* Animate the transitions */
		transition:0.8s; text-align:center;
		color:#FFF;
		}
.box-back{
 		/* The back side is flipped 180 deg by default */
		transform:rotateY(180deg);
		-webkit-transform:rotateY(180deg);
		background-color:#7E0002;
 
		}
.container:hover .box-front{
		/* When the container is hovered, flip the front side and hide it .. */
		transform:rotateY(180deg);
		-webkit-transform:rotateY(180deg);
		}
.container:hover .box-back{
		/* .. at the same time flip the back side into visibility */
		transform:rotateY(360deg);
		-webkit-transform:rotateY(360deg);
		}
</style>