忽略剪辑路径的 3D 转换

Question

我有一个带有clip-path的父div#clipper，它剪辑了一个子div#object。当我将 3D 变换应用于#object时，无论值如何，元素都会停止服从剪辑并显示为没有应用剪辑。

这是一个演示。

.HTML：

<div id="clipper">
<div id="object"></div>
</div>

.CSS：

body {
margin: 0;
}
#clipper, #object {
width: 200px;
height: 200px;
}
#clipper {
clip-path: inset(30px);
}
#object {
transform: translate3d(1px, 1px, 1px);
background-color: #3FA;
}

这似乎发生在Chrome和Firefox中。有没有记录在案的原因？我该如何预防？

Answer 1

从 CSS 规范：

13.5 SVG 和 3D 变换函数

此规范明确要求三维转换 要应用于容器元素的函数：、、、全部 图形元素、引用元素的所有图形和 SVG 元素。

三维变换函数和属性透视， 透视原点、变换样式和背面可见性不能 用于元素：clipPath，linearGradient，radialGradient和模式。如果转换列表包含三维变换函数，必须忽略完整的变换列表。这 必须忽略每个以前命名的属性的值。 这些元素之一包含的可转换元素可以 具有三维变换功能。这 元素要求用户代理创建平展 在应用后代元素之前表示， 因此覆盖变换样式的行为：保留-3D。

如果矢量效果属性设置为非缩放描边和 对象位于 3D 渲染上下文中，该属性对其没有影响 抚摸物体。

文档

它正在谈论 SVG，但我想同样的规则延伸到非 SVG 元素