CSS CSS 3d Transforms

Edit Code
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS 3D Transforms</title>

<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>
</head>

<body>
	<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>
</body>
</html>
Preview html View