.flip-3d { perspective: 1200px;}
.flip-3d figure { position: relative; transform-style: preserve-3d; transition: 1s transform; font-size: 1.6rem; margin: 25px; }
.flip-3d figure img { width: 100%; height: auto; }
.flip-3d figure figcaption {
	position: absolute;
	width: 100%;
	height:100%; 
	top: 0; 
	transform: rotateY(.5turn) translateZ(1px);
	background: rgba(255,255,255,0.9);
	text-align: center;
	padding-top: 45%; 
	opacity: 0.6;
	transition: 1s .5s opacity;
}
.flip-3d figure figcaption p{
	font-size: 20px;
	font-weight: bolder;
}
.flip-3d:hover figure { transform: rotateY(.5turn);
}
.flip-3d:hover figure figcaption { opacity: 1; }
.flip-3d figure:after { content: " "; display: block; height:3vw; width: 100%; transform: rotateX(90deg); background-image: radial-gradient(ellipse closest-side, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 100%); }