CSS滤镜破解3D变换 [英] CSS Filters break 3D transforms

问题描述

当我发现过滤器变平变换时，我正在试验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;宽度：100px;背景：蓝色; transform：rotateX（45deg）rotateZ（45deg）;边框：实心2px黑色; box-sizing：border-box;} div.face1 {content：; height：100px;宽度：100px;背景：绿色; transform：rotateY（90deg）translateZ（50px）translateX（50px）;边框：实心2px黑色; box-sizing：border-box;} div.face2 {content：; height：100px;宽度：100px;背景：红色; transform：rotateY（90deg）rotateX（-90deg）translateZ（-50px）translateX（50px）;边框：实心2px黑色; box-sizing：border-box;} div.perspective {perspective：900px;位置：绝对; margin：50px;}。filter {filter：opacity（1）; -webkit-filter：opacity（1）;}

< ; div class =perspective> < div id =cubeclass =cube> < div class =face1>< / div> < div class =face2>< / div> < / div>< / div><按钮onclick =toggleFilter（）>切换.filter< /按钮>

这是一个小提琴演示。
我无法在任何地方找到任何信息，所以我想知道是否有解决方法。

解决方案

根据 W3C转换规范：

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

overflow：除可见以外的任何值。 b
$ b

过滤器：除none以外的任何值。

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

。

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

mask-box-image-source：any

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

计算值不会影响变换风格。

这就是为什么当您切换时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;宽度：100px; transform：rotateX（45deg）rotateZ（45deg）;} div.face0 {position：absolute;内容：'';身高：100％;宽度：100％; top：0px; left：0px;背景：蓝色;边框：实心2px黑色; box-sizing：border-box;} div.face1 {content：; height：100px;宽度：100px;背景：绿色; transform：rotateY（90deg）translateZ（50px）translateX（50px）;边框：实心2px黑色; box-sizing：border-box;} div.face2 {content：; height：100px;宽度：100px;背景：红色; transform：rotateY（90deg）rotateX（-90deg）translateZ（-50px）translateX（50px）;边框：实心2px黑色; box-sizing：border-box;} div.perspective {perspective：900px;位置：绝对; margin：50px;}。filter .face0，.filter .face1，.filter .face2 {filter：opacity（25％）; -webkit-filter：opacity（25％）;}  

< div class =perspective> < div id =cubeclass =cube> < div class =face0>< / div> < div class =face1>< / div> < div class =face2>< / div> < / div>< / div><按钮onclick =toggleFilter（）>切换.Filter< /按钮>

I was experimenting with CSS transforms when I found that filters flatten the transforms, just like 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. I couldn't find any information on this anywhere, so I would like to know if there is a workaround for this.

解决方案

As per 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.

This is the reason why the 3D transforms are broken and the layers are flattened when you toggle on the filters. The one workaround that I know for this situation is creating the entire cube using sibling elements and apply the filter on the sibling elements directly instead of applying on the parent.

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>

这篇关于CSS滤镜破解3D变换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！