草庐IT

html - 仅使用 CSS 创建盒盖打开效果

我尝试使用过渡来创建这种效果。它应该看起来像您正在打开一个盒子。有两个问题:盒子关闭的顺序与打开的顺序相同。有没有办法按照打开的相反顺序关闭盒子,以便盒子回到关闭时的状态?由于红色和蓝色襟翼,绿色和黄色襟翼的末端在过渡期间被隐藏,因此它看起来不像3D。有没有办法以3D方式显示所有襟翼?如果解决方案是纯CSS,我更希望不要使用JavaScript。#box{position:relative;top:170px;left:170px;width:300px;height:300px;border:1pxsolidblack;perspective:800px;}#flap1,#flap2