transform+perspective开门效果

本文主要是介绍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);
}

实现效果：

这篇关于transform+perspective开门效果的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---