探究 CSS 混合模式\滤镜导致 CSS 3D 失效问题

今天在写一个小的 CSS Demo，一个关于 3d 球的旋转动画，关于 CSS 3D，少不了会使用下面这几个属性：

{
    transform-style: preserve-3d;
    perspective: 1000;
    transform: translate3d();
}
web前端开发学习Q-q-u-n： 767273102 ，分享开发工具，零基础，进阶视频教程，希望新手少走弯

嗯，大概到了这个效果，想到了 CSS 混合模式 mix-blend-mode，寻思着，利用混合模式，是否能让效果更上一层楼或者碰撞出一些其他火花。

mix-blend-mode：我们通常称之为混合模式，利用混合模式将多个图层混合可以得到一个新的效果，mix-blend-mode 描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合。

CSS 3D 配合 mix-blend-mode

然而，给元素加上了一个混合模式之后，神奇的事情发生了，3D 效果消失了。

也就是在每个光点的 CSS 元素代码中添加这样一句：

{
    mi