CSS滤镜破坏3D变换。

Question

我在尝试使用CSS变形时发现，滤镜会使变形被压扁，就像transform-style: flat一样。

var toggleFilter = function() {
  var div = document.getElementById("cube")
  if (div.className == "cube") {
    div.className = "cube filter"
  } else {
    div.className = "cube"
  }
}

* {
  transform-style: preserve-3d
}
div.cube {
  height: 100px;
  width: 100px;
  background: blue;
  transform: rotateX(45deg) rotateZ(45deg);
  border: solid 2px black;
  box-sizing: border-box;
}
div.face1 {
  content: "";
  height: 100px;
  width: 100px;
  background: green;
  transform: rotateY(90deg) translateZ(50px) translateX(50px);
  border: solid 2px black;
  box-sizing: border-box;
}
div.face2 {
  content: "";
  height: 100px;
  width: 100px;
  background: red;
  transform: rotateY(90deg) rotateX(-90deg) translateZ(-50px) translateX(50px);
  border: solid 2px black;
  box-sizing: border-box;
}
div.perspective {
  perspective: 900px;
  position: absolute;
  margin: 50px;
}
.filter {
  filter: opacity(1);
  -webkit-filter: opacity(1);
}

<div class="perspective">
  <div id="cube" class="cube">
    <div class="face1"></div>
    <div class="face2"></div>
  </div>
</div>
<button onclick="toggleFilter()">Toggle .filter</button>

这里有一个演示。我在任何地方都找不到相关信息，所以想知道是否有解决方法。

- spaaaacccee

Answer 1

根据W3C转换规范：

以下CSS属性值需要用户代理在应用之前创建后代元素的平坦表示，因此覆盖transform-style：preserve-3d的行为： overflow：除visible之外的任何值。 filter：除none之外的任何值。 clip：除auto之外的任何值。 clip-path：除none之外的任何值。 isolation：使用隔离的值。 mask-image：除none之外的任何值。 mask-box-image-source：除none之外的任何值。 mix-blend-mode：除normal之外的任何值。

计算出的transform-style值不受影响。

这就是为什么在切换筛选器时，3D变换会出错并且图层会被压平的原因。我所知道的一个解决方法是使用兄弟元素创建整个立方体，并直接在兄弟元素上应用filter，而不是在父元素上应用。

var toggleFilter = function() {
  var div = document.getElementById("cube")
  if (div.className == "cube") {
    div.className = "cube filter"
  } else {
    div.className = "cube"
  }
}

* {
  transform-style: preserve-3d
}
div.cube {
  position: relative;
  height: 100px;
  width: 100px;
  transform: rotateX(45deg) rotateZ(45deg);
}
div.face0 {
  position: absolute;
  content: '';
  height: 100%;
  width: 100%;
  top: 0px;
  left: 0px;
  background: blue;
  border: solid 2px black;
  box-sizing: border-box;
}
div.face1 {
  content: "";
  height: 100px;
  width: 100px;
  background: green;
  transform: rotateY(90deg) translateZ(50px) translateX(50px);
  border: solid 2px black;
  box-sizing: border-box;
}
div.face2 {
  content: "";
  height: 100px;
  width: 100px;
  background: red;
  transform: rotateY(90deg) rotateX(-90deg) translateZ(-50px) translateX(50px);
  border: solid 2px black;
  box-sizing: border-box;
}
div.perspective {
  perspective: 900px;
  position: absolute;
  margin: 50px;
}
.filter .face0,
.filter .face1,
.filter .face2 {
  filter: opacity(25%);
  -webkit-filter: opacity(25%);
}

<div class="perspective">
  <div id="cube" class="cube">
    <div class="face0"></div>
    <div class="face1"></div>
    <div class="face2"></div>
  </div>
</div>
<button onclick="toggleFilter()">Toggle .Filter</button>

- Harry

---

这个能否通过backdrop-filter实现呢？ - Lynel Hudson