3d card

by Dong Shelton

HTML

<div class="tran-wraper">
  <div class="card">
    <div class="front"></div>
    <div class="back"></div>
  </div>
</div>

CSS

.tran-wraper {
	padding: 50px;
	transform-style: preserve-3d;
	perspective: 400px;
	perspective-origin: 50% 50%;
}
div.card {
	position: relative;
	margin: 10px auto;
	width: 140px;
	height: 200px;
	box-shadow: 0 0 10px 0 gray;
	transition: all 1s;
	transform-style: preserve-3d;
}
.front {
	position: absolute;
	z-index: 2;
	width: 140px;
	height: 200px;
	background-color:red;
	background-size: 140px 200px;
	backface-visibility: hidden;
}
.back {
	position: absolute;
	z-index: 1;
	width: 140px;
	height: 200px;
	background-color:green;
	background-size: 140px 200px;
	transform: rotateY(180deg);
}
div.card:active {
	transform: rotateY(180deg);
}