在旋转平面中旋转模糊元素在Chrome中部分模糊

Question

我希望在3D旋转平面中旋转一个模糊的多边形（简单来说就是一个三角形）。

我制作完整高度（100vh）body我的场景并在其上设置透视属性。

我在飞机上使用section，在模糊的旋转物品中使用div。

要获取多边形，我使用clip-path，但由于filter在 clip-path之前应用，我使用伪元素来获取实际的多边形形状

一切都很好，直到我把模糊，我div的旋转动画和飞机的旋转放在一起。

我很确定这是一个错误，因为我只是在Chrome中使用它。但问题是，我现在怎样才能解决它，而不是最终解决它？

到目前为止，我能找到的唯一解决方案是使用SVG过滤器，而不是使用CSS clip-path剪切伪剪辑的SVG子项。但是我想知道是否有没有SVG解决方案，所以我不必弄乱我的标记。

body {
  overflow: hidden;
  height: 100vh;
  perspective: 45vmin;
  perspective-origin: 50% 85%;
}

section {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: rotatex(90deg); /* not buggy without this */
}

div {
  position: absolute;
  filter: blur(20px);  /* or without this */
  animation: r 8s linear infinite;  /* or without this */
}
div:before {
  position: absolute;
  margin: -20vmin;
  width: 40vmin;
  height: 40vmin;
  background: deeppink;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  content: "";
}

@keyframes r {
  to {
    transform: rotate(1turn);
  }
}

<section><div></div></section>

这就是我在Chrome中看到的内容：

Answer 1

如果我理解得很好，请尝试以下操作：

  body {
  overflow: hidden;
  height: 100vh;
  perspective: 45vmin;
  perspective-origin: 50% 85%;
  -webkit-filter:blur(10px);
}

...

div {
  position: absolute;
  -webkit-filter:blur(10px);
   /* or without this */
  animation: r 8s linear infinite;  /* or without this */
}

...

https://codepen.io/catafest/pen/PvqJQE