.container{
  width:1360px;
  margin:0px auto;
}
.flip{
	width:1000px;
	height: 556px;
  margin:20px;
  float:left;
	position: relative;
	perspective: 1000px;
}
.flip div{
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	transition: all 1s ease;
	transform-style: preserve-3d;
	backface-visibility: hidden;
	box-shadow: 2px 2px 20px rgba(0,0,0,0.5);
}
.flip div.front{
	background: url(images/P01.png);
	z-index: 1;
}
.flip div:before{
  content:attr(data-text);
  width:100%;
  height:30px;
  position:absolute;
  left:0;
  bottom:0;
  font-size:20px;
  line-height:95px;
  text-align:center;
  color:#72FFFF;
  background-color:rgba(0,0,0,0);
}
.flip div.back{
	background: url(images/P02.png);
	z-index: 2;
}
.flip:hover div.front{
	z-index: 2;;
}
.flip:hover div.back{
	z-index: 1;;
}
.Y div.back{
  transform:rotateY(180deg);
}
.Y:hover div.front{
  transform:rotateY(180deg);
}
.Y:hover div.back{
  transform:rotateY(0deg);
}
.X div.back{
  transform:rotateX(180deg);
}
.X:hover div.front{
  transform:rotateX(180deg);
}
.X:hover div.back{
  transform:rotateX(0deg);
}