忽略剪辑路径的 3D 转换

Question

我有一个 parent div#clipper 和一个 clip-path，它剪辑了一个 child div#object。当我对 #object 应用 3D 变换时，无论值如何，元素都会停止服从剪辑并显示为好像没有应用任何剪辑。

Here's a demonstration.

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 and 3D transform functions

This specification explicitly requires three-dimensional transform functions to apply to the container elements: , , , all graphics elements, all graphics referencing elements and the SVG element.

Three-dimensional transform functions and the properties perspective, perspective-origin, transform-style and backface-visibility can not be used for the elements: clipPath, linearGradient, radialGradient and pattern. If a transform list includes a three-dimensional transform function, the complete transform list must be ignored. The values of every previously named property must be ignored. Transformable elements that are contained by one of these elements can have three-dimensional transform functions. The , , elements 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.

If the vector-effect property is set to non-scaling-stroke and an object is within a 3D rendering context the property has no affect on stroking the object.

documentation

说的是 SVG，但我猜同样的规则也适用于非 SVG 元素

忽略剪辑路径的 3D 转换

3D Transformation Ignoring Clip Path

css

css-transforms