实现开门动画效果

今天看到一个小动画是一个打开门的效果感觉挺好玩的，自己写了一下
 

一个左侧的div 和一个右侧的div,

 

section{

width: 500px;

height: 300px;

border: 1px solid #000;

position: relative;

margin:150px auto;

background: url('../assest/test1.png') no-repeat;

perspective: 1000px;

}

.left-door,

.right-door{

width: 250px;

height: 100%;

position: absolute;

background-color: red;

top:0;

transition: all 1s;

 

}

 

.right-door{

right:0;

border-left: 1px solid #000;

transform-origin: right;

 

}

.left-door{

left:0;

border-right: 1px solid #000;

transform-origin: left;

 

}

 

.left-door::before,

.right-door::before{

content: "";

position: absolute;

top:50%;

width: 20px;

height: 20px;

transform: translateY(-50%);

border: 1px solid #000;

border-radius: 50%;

}

 

.right-door::before{

left:5px

}

.left-door::before{

right:5px;

}

 

section:hover .left-door{

transform: rotateY(-120deg);

}

section:hover .right-door{

transform: rotateY(120deg);

}


当鼠标经过的时候，给两扇门设置旋转动画，给section设置透视距离，增加3d 效果，最后的成品图就是这样