body{
	margin: 0;
	padding: 0;
	font: 1em/2em sans-serif;
	background: #eee;
	color: #3d3d3d;
}

.t3d{
	width: 300px;
	height: 400px;
	margin: 50px auto;
	perspective: 1200px;
}

.t3d:hover > .rotate{
	transform: rotateY(180deg);
}

.rotate{
	position: relative;
	transform-style: preserve-3d;
	transition: .5s;
}

.text{
	position: absolute;
	top: 0;
	left: 0;
	transform: rotateY(180deg);
}

.pd{
	padding: 20px;
}

img{
	vertical-align: middle;
}

img, .text{
	border: 4px double #ccc;
	width: 300px;
	height: 400px;
	background: #fff;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	backface-visibility: hidden;
}