.wrap{width: 1200px;margin: 0px auto;}
.flipper {
	perspective: 400px;
	position: relative;
	width: 300px;
	height: 300px;
	float: left;
}
.flipper img{width: 220px;}

.flipper + .flipper {
	margin-top: 1em;
}

.flipper-object {
	position: absolute;
	width: 100%;
	height: 100%;
	transition: transform 1s;
	transform-style: preserve-3d;
}

.panel {
	display: flex;
	min-height: 44px;
	align-items: center;
	justify-content: center;
	top: 0;
	width: 100%;
	height: 100%;
	position: absolute;
	backface-visibility: hidden;
}

.flipper-vertical .back {
	transform: rotateX(180deg);
}

.flipper-horizontal .back {
	transform: rotateY(180deg);
}

.back {

}

.front {

}

.flipper:hover .flipper-vertical {
	transform: rotateX(180deg);
}

.flipper:hover .flipper-horizontal {
	transform: rotateY(180deg);
}