html,body {
	width:100%;
	height:100%;
	margin:0;
	padding:0;
	font-family:Arial, sans-serif;
	font-size:12pt;
}


.container{
	padding-top:50px;
	display:flex;
	justify-content: space-around;
	perspective:1000px;
	perspective-origin:center;
}

.container>.block{
	position:relative;
	flex-basis:200px;
	height:400px;
}

.block>.front, .block>.back{
	position:absolute;
	width:100%;
	height:100%;
	backface-visibility: hidden;
	transition:transform 0.5s ease-in-out;
}

.block>.front{
	background-color:#F6E847;
}

.block>.back{
	background-color:#6FB9A3;
	transform: rotateY(180deg);
}

.front p, .back p{
	text-align:center;
}

.block:hover>.front {
	transform:rotateY(-180deg);
}

.block:hover>.back{
	transform:rotateY(0deg);
}