body
{
  background:radial-gradient(ellipse farthest-corner at center center , #F2F2F2 0%, #A8A8A8 100%) repeat scroll 0 0 rgba(0, 0, 0, 0)
}

.flip-container
{
	width: 200%;
}

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

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

.flip-container .flipper .front,
.flip-container .flipper .back
{
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	-webkit-backface-visibility: hidden;
	   -moz-backface-visibility: hidden;
	        backface-visibility: hidden;
	-webkit-transform: perspective(1000px) rotateY(180deg);
	   -moz-transform: perspective(1000px) rotateY(180deg);
	     -o-transform: perspective(1000px) rotateY(180deg);
			transform: perspective(1000px) rotateY(180deg);
	-webkit-transition: 0.6s;
	   -moz-transition: 0.6s;
		 -o-transition: 0.6s;
			transition: 0.6s;
}

.flip-container .flipper .front
{
	z-index: 2;
	-webkit-transform: perspective(1000px) rotateY(0);
	   -moz-transform: perspective(1000px) rotateY(0);
	     -o-transform: perspective(1000px) rotateY(0);
			transform: perspective(1000px) rotateY(0);
}
 
.flip-container:hover .flipper .front
{
	-webkit-transform: perspective(1000px) rotateY(-179.9deg);
	   -moz-transform: perspective(1000px) rotateY(-179.9deg);
	     -o-transform: perspective(1000px) rotateY(-179.9deg);
			transform: perspective(1000px) rotateY(-179.9deg);
}
 
.flip-container:hover .flipper .back
{
	-webkit-transform: perspective(1000px) rotateY(0);
	   -moz-transform: perspective(1000px) rotateY(0);
	     -o-transform: perspective(1000px) rotateY(0);
			transform: perspective(1000px) rotateY(0);
}

.contents
{
  margin: 100px auto;
  width: 500px;
}

img
{
  box-shadow: 0px 25px 19px -18px #545454;
}