transform+perspective开门效果

HTML代码：

<div class="door">
	<img src="images/taobao/banner1.jpg" alt="">
	<div class="door-l"></div>
	<div class="door-r"></div>
</div>

CSS代码：

.door {
	width: 520px;
	height: 280px;
	margin: 0 auto;
	position: relative;
	perspective: 1000px; /*定义3D元素距视图的距离，子元素获得透视效果*/
}
.door-l,
.door-r {
	width: 260px;
	height: 280px;
	background-color: pink;
	border: 1px solid #000;
	position: absolute;
	top: 0;
	transition: all .5s;
}
.door-l {
	left: 0;
	transform-origin: left;
}
.door-r {
	right: 0;
	transform-origin: right;
}
.door-l:after, .door-r:before {
	content: "";
	display: block;
	width: 20px;
	height: 20px;
	border: 1px solid #000;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	position: absolute;
	top: 50%;
	transform: translate(0, -50%);
}
.door-l:after {
	right: 10px;
}
.door-r:before {
	left: 10px;
}
.door:hover .door-l {
	transform: rotateY(-100deg);
}
.door:hover .door-r {
	transform: rotateY(100deg);
}

实现效果：