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 ：

     

溢出：除可见之外的任何值。

     

过滤：除非之外的任何值。

     

剪辑：除auto之外的任何值。

     

clip-path：除none之外的任何值。

     

隔离：使用隔离的值。

     

mask-image：除none之外的任何值。

     

mask-box-image-source：除none之外的任何值。

     

mix-blend-mode：除正常值以外的任何值。

     

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

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

＆＃13;

＆＃13;

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

＆＃13;

* {
  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%);
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;