Css 如何用变换来代替负边距以达到折纸效果？

我试图实现一个只使用CSS的折纸效果。我在视觉上（几乎）达到了预期效果，但有一些主要缺陷；即：

• 使用方框阴影和负边距会大大降低性能
• 负边距不与转换转换同步，并在转换开始和结束之间的某个位置重叠列表项

我需要帮助的是：

• 重要信息：使用变换样式替换负片边距，这有助于更真实地实现所需的折叠效果，提高性能并消除负片边距产生的重叠元素。问题在于让所有元素展开并折叠到菜单按钮后面，因为“变换”会相对于元素自身的原始空间移动元素，而不会通过其移动影响其他元素，从而保留其空间
• 可选：用另一种方法替换框阴影，模拟光线击中边缘，然后在折叠内部褪色，光线穿过用户所在的屏幕，以提高性能，可能通过使用不透明度和伪类

我注意到，由于变换原点，如果我删除边距并看着它们不移动地折叠，那么每一对都已连接并*链接*。也许有一种方法可以实现这一点，即链接元素上方和下方的元素。您可以删除负边距并运行它来理解我的意思

$（“#菜单主切换”）。打开（'click'，function（）{
if（$（this）.hasClass（'active'））{
$（this.removeClass（'active'）；
}否则{
$（this.addClass（'active'）；
}
});
/*美感造型开始*/
ul{margin:0；padding:0；列表样式类型：none}#menu main，#menu main toggle{width:75%；margin:auto}#menu main toggle，.菜单项{背景：#e74c3c；边框：none}#menu main.菜单链接，#menu main toggle{outline:0；显示：块；高度：50px；填充：12px；颜色：#fff；边框顶部：1px虚线#大小：bf8；边框：无；文本框：对齐}
/*美感造型末端*/
#导航主.下拉菜单-toggle.active+.toggleable>。菜单项{
保证金：0；
变换：透视（320像素）旋转（0度）；
框阴影：嵌入0 20px 0透明；
}
#菜单主菜单项{
过渡：变换。75秒缓进缓出，边距。75秒缓进缓出，方框阴影。75秒缓进缓出；
}
#菜单main.menu-item.odd{
边缘底部：-100px；
变换：透视（320px）旋转（-90度）；
变换原点：顶部；
盒影：插入0-50px25px0RGBA（0,0,0,5）；
}
#主菜单。菜单项。偶数{
利润上限：-100px；
变换：透视（320像素）旋转（90度）；
变换原点：底部；
盒影：插入0 50px 25px 0 rgba（0,0,0,5）；
}

菜单














这里有一个可行的解决方案

我只在Chrome上测试过，因为它使用了变量，所以需要一个现代浏览器。但您可以轻松地调整它，使其在没有变量的情况下工作

使用的变换是硬的。我以后再解释

将鼠标悬停在列表上可将其折叠


.test{
--高度：150像素；
--时间：5s；
--角度：0度；
--角度2:-0度；
--bkg1:0%；
--bkg2:100%；
}
.测试：悬停{
--角度：90度；
--角度2：-90度；
--bkg1:100%；
--bkg2:0%；
}
保险商实验室{
边缘顶部：10px；
宽度：70%；
位置：相对位置；
列表样式：无；
}
李{
位置：绝对位置；
宽度：100%；
转换：转换变量（--时间）；
底部：0px；
变换：rotateX（var（--angle））translateY（100%）rotateX（var（--angle2））；
}
李：第n个孩子（1）{
高度：0px；
}
李：第n个孩子（2），李：第n个孩子（3）{
高度：计算（2*var（--高度））；
}
李：第n个孩子（4），李：第n个孩子（5）{
高度：计算（4*var（--高度））；
}
李：第n个孩子（6），李：第n个孩子（7）{
高度：计算（6*var（--高度））；
}
a{
位置：绝对位置；
高度：var（--高度）；
宽度：100%；
显示：块；
字体大小：40px；
背景尺寸：100%300%；
背景重复：无重复；
转换：转换变量（--时间），背景位置变量（--时间）；
}
李：第n个孩子（单数）a{
最高：100%；
变换原点：顶部；
变换：rotateX（var（--angle））translateY（100%）透视（400px）translateY（-100%）rotateX（var（--angle2））rotateX（var（--angle2））；
背景图像：线性梯度（至顶部，rgba（0,0,0,0.6）30%，透明66%）；
背景位置：中心变量（--bkg1）；
}
李：第n个孩子（偶数）a{
底部：0px；
变换原点：底部；
变换：rotateX（var（--angle2））translateY（-100%）透视（400px）translateY（100%）rotateX（var（--angle））rotateX（var（--angle））；
背景图像：线性梯度（rgba（0,0,0,0.6）30%，透明66%）；
背景位置：中心变量（--bkg2）；
}
李：第n个孩子（1）a{
背景色：rgba（200,0,0,0.3）；
}
李：第n个孩子（2）a{
背景色：rgba（0200,0,0.3）；
}
李：第n个孩子（3）a{
背景色：rgba（0,0200,0.3）；
}
李：第n个孩子（4）a{
背景色：rgba（200200,0,0.3）；
}
李：第n个孩子（5）a{
背景色：rgba（200,0200,0.3）；
}
李：第n个孩子（6）a{
背景色：rgba（02002000,0.3）；
}


-1-


-2-


-3-


-4-


-5-


-6-

太棒了。直到你给我看了你的答案，我才知道CSS变量和计数器。不过，我会给它更多的时间，因为我现在还不想放弃其他浏览器。如果没有其他解决方案，我将选择您的答案并尝试