* {
	padding:0;
	margin:0;
}
body {
	display:flex;
	justify-content:center;
	align-items:center;
	height:100vh;
	background-image:linear-gradient(200deg,#78f,#f78);
	perspective:1000px;
}
.card {
	position:relative;
	width:300px;
	height:450px;
	border-radius:30px;
	cursor:pointer;
	background-color:#fff;
	box-shadow:1px 1px 20px rgba(0,0,0,0.1);
	transform-style:preserve-3d;
	animation:rotate-reverse 1.2s cubic-bezier(0.66,-0.47,0.33,1.5) forwards;
}
.card:hover {
	animation:rotate 1.2s cubic-bezier(0.66,-0.47,0.33,1.5) forwards;
}
.front,.back {
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:space-around;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	/* 1em = 16px */
	font-size:1.3em;
	border-radius:30px;
	background-color:#fff;
}
.back {
	transform:rotateY(180deg);
}
@keyframes rotate {
	0% {
	transform:rotateY(0);
}
100% {
	transform:rotateY(180deg);
}
}@keyframes rotate-reverse {
	0% {
	transform:rotateY(180deg);
}
100% {
	transform:rotateY(0);
}
}