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>

Here's a fiddle demonstrating this. 我在任何地方都找不到这方面的任何信息，所以我想知道是否有解决方法。

Answer 1

根据W3C Transforms Spec：

以下 CSS 属性值要求用户代理在应用之前创建后代元素的扁平化表示，因此覆盖 transform-style:preserve-3d 的行为：

overflow: 可见以外的任何值。

filter：除无以外的任何值。

clip: auto 以外的任何值。

clip-path: 除无以外的任何值。

isolation：隔离的使用值。

mask-image: 除无以外的任何值。

mask-box-image-source: 除无以外的任何值。

mix-blend-mode: 任何非正常值。

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>