*{
	margin:0;
	padding:0;
}

html,body{
	width:100%;
	height:100%;
	background:#4e9bfa;
}

.container{
	width:250px;
	height:350px;
	background:url(i1.jpg);
	position:relative;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
	perspective:1000px;
}

.cover{
	width:210px;
	height:100%;
	position:absolute;
	left:40px;
	background-color:#345b8c;
	transform:rotateY(-20deg);
	transform-style:preserve-3d;
	transform-origin:left;
	transition:all .5s ease-in;
}

.container:hover .cover{
	transform:rotateY(-180deg);
}

figure{
	margin:0;
	display:block;
	position:absolute;
	width:100%;
	height:100%;
	backface-visibility:hidden;
}

figure.front{
	background:url(i2.jpg);
}

figure.back{
	background:url(i3.jpg);
	transform:rotateY(180deg);
}