<style>

.card > .flip {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	transform: rotateY(0deg);
	transform-style: preserve-3d;
	transition-property: transform;
	transition-duration: 1s;
	transition-timing-function: cubic-bezier(0.5, 0.1, 0.75, 0.5);
}

.card > .flip > div {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	border-radius: 3px;
	box-shadow: 0 2px 2px      hsla(0, 0%, 0%, 0.14),
	            0 3px 1px -2px hsla(0, 0%, 0%, 0.12),
	            0 1px 5px      hsla(0, 0%, 0%, 0.1);
	transform-style: preserve-3d;
}

.card > .flip > .back {
	background-color: white;
	transform: rotateY(180deg);
	transition-property: background-color;
	transition-duration: 800ms;
}

.card > .flip > div > * {
	transform: scale(0.9) translateZ(25px);
}

.card:hover > .flip {
	z-index: 1;
	transform: rotateY(180deg);
	transition-timing-function: cubic-bezier(0.25, 1, 0.25, 1);
}

.card:hover > .flip > .back {
	background-color: hsla(0, 0%, 100%, 0.9);
	transition-delay: 100ms;
}

</style>

<div class="card">
	<div class="flip" style="width: 100px; height: 100px;">
		<div class="front">FRONT</div>
		<div class="back">BACK</div>
	</div>
</div>