Question

我的父div#clipper有一个clip-path，它会剪切一个孩子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变换功能

该规范明确要求三维变换   要应用于容器元素的函数：,,, all   图形元素，所有图形引用元素和SVG    元件。

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

如果矢量效果属性设置为非缩放笔划和   对象位于3D渲染上下文中，属性不会受到影响   抚摸对象。

documentation

它在谈论SVG，但我想同样的规则也扩展到非SVG元素

3D转换忽略剪辑路径

1 个答案: