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>

這是一個證明這一點的小提琴。 我在任何地方都找不到這方面的任何信息，所以我想知道是否有解決方法。

Answer 1

根據W3C 轉換規范：

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