保罗·刘易斯(Paul Lewis)制作了3D卡翻转动画。 在那里很简单,但这也需要一个阴影元素:
阴影可能需要移动或淡入淡出,因此我们需要一种可以对变换和不透明度进行动画处理的解决方案,因为它们可以移交给GPU。 它需要与阴影元素分开,因为我们可能希望淡出并移动它而不影响其他元素。
他尝试了box-shadow
和filter: blur()
,但是两者的性能都不够。
他尝试了使用带有模糊滤镜的SVG元素,但仅SVG不能完成9切片缩放(必须防止拐角缩放变得笨拙)。
获胜者使用的是SVG图像,但通过border-image
将其应用于元素,这实际上是9切片缩放。