版权声明：转载本文，请附录原文地址，如果错误，请联系我。 https://blog.csdn.net/qq_19880197/article/details/86510443
HTML部分代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<section>
<div class="door-l"></div>
<div class="door-r"></div>
</section>
</body>
</html>CSS部分代码
section{
width: 500px;
height: 313px;
border: 1px solid #000;
background: url(img/1.jpg);
position: relative;/*子绝父相*/
margin: 100px auto;
perspective: 1000px;/*给需要透视的元素的父元素添加透视*/
}
.door-l,
.door-r{
width: 50%;
height: 100%;
background-color: pink;
position: absolute;/*新添加的两个门，用浮动实现上下两张图折叠*/
top: 0;
transition: all 1s;/*动画时间*/
}
.door-l{
left: 0;
transform-origin:left;/*以左侧为轴转动*/
border-right: 1px solid #000;
}
.door-r{
right: 0;
transform-origin: right;/*以右侧为轴转动*/
border-left: 1px solid #000;
}
.door-l::before,
.door-r::before{
content: "";
width: 20px;
height: 20px;
border: 1px solid #000;
border-radius: 50% ;
position: absolute;
top:50%;
transform: translateY(-50%);/*沿着Y轴移动一半*/
}
.door-l::before{
right: 5px;
}
.door-r::before{
left: 5px;
}
section:hover .door-l{
transform: rotateY(-130deg);/*沿着Y轴旋转130度*/
}
section:hover .door-r{
transform: rotateY(130deg);/*沿着Y轴旋转130度*/
}