最近看到一个大屏效果类似于一个开门倾斜效果 所以再网上找到一个开门css 效果准备记录一下 废话不多说直接上代码
代码如下(示例):
<!-- 开门 -->
<div class="door">
<div class="left"></div>
<div class="right"></div>
</div>
<style>
/* 开门 */
.door{
width: 550px;
height: 300px;
margin: 150px auto;
perspective: 1200px;
position: relative;
border: 1px solid;
transition: all 1s;
}
.left,.right {
float: left;
width: 50%;
height: 100%;
background-color: blue;
opacity: 0.1;
transition: 1s;
position: relative;
}
.left{
/* 旋转中心点变成是左边、上下居中的那个位置 */
transform-origin: left center;
}
.right{
transform-origin: right center;
}
.door:hover .left {
transform: rotateY(-130deg);
}
.door:hover .right {
transform: rotateY(130deg);
}
</style>
参考网站: https://www.cnblogs.com/zaiji/p/13701669.html