javascript - 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 :

The following CSS property values require the user agent to create a flattened representation of the descendant elements before they can be applied, and therefore override the behavior of transform-style: preserve-3d:

overflow: any value other than visible.

filter: any value other than none.

clip: any value other than auto.

clip-path: any value other than none.

isolation: used value of isolate.

mask-image: any value other than none.

mask-box-image-source: any value other than none.

mix-blend-mode: any value other than normal.

The computed value of transform-style is not affected.

这就是为什么当您打开过滤器时 3D 变换被破坏并且图层被展平的原因。对于这种情况，我知道的一种解决方法是使用兄弟元素创建整个多维数据集，并将过滤器直接应用于兄弟元素，而不是应用于父元素。

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>