我尝试使用过渡效果来创建这个效果。它应该看起来像你正在打开一个盒子。
存在两个问题:
- 关闭盒子的顺序与打开的顺序相同。有没有办法以与其打开相反的顺序关闭盒子,使得盒子在关闭时回到与关闭前相同的状态?
- 由于红色和蓝色瓣片的关系,绿色和黄色瓣片的末端在转换期间被隐藏了,因此它看起来不是3D的。有没有一种方法可以以3D方式显示所有瓣片?
如果可能的话,请使用纯CSS解决方案,不要使用JavaScript。
#box {
position: relative;
top: 170px;
left: 170px;
width: 300px;
height: 300px;
border: 1px solid black;
perspective: 800px;
}
#flap1, #flap2, #flap3, #flap4 {
position: absolute;
}
#flap1 {
background-color: red;
width: 150px;
height: 300px;
z-index: 1;
transform-origin: 0 0;
transition: transform 1s;
}
#flap2 {
left: 150px;
background-color: blue;
width: 150px;
height: 300px;
z-index: 1;
transform-origin: 100% 0;
transition: transform 1s ease 0.3s;
}
#flap3 {
background-color: green;
width: 300px;
height: 150px;
transform-origin: 0 0;
transition: transform 1s ease 0.6s;
}
#flap4 {
background-color: yellow;
top: 150px;
width: 300px;
height: 150px;
transform-origin: 0 100%;
transition: transform 1s ease 0.9s;
}
#box:hover #flap1{
transform: rotateY(-170deg);
}
#box:hover #flap2{
transform: rotateY(170deg);
}
#box:hover #flap3{
transform: rotateX(170deg);
}
#box:hover #flap4{
transform: rotateX(-170deg);
}
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="box">
<div id="flap1"></div>
<div id="flap2"></div>
<div id="flap3"></div>
<div id="flap4"></div>
</div>
</body>
</html>
perspective
。