CODEWITHSUNDEEP
csscss-transforms
Litty
Litty

Reputation: 1876

3D Transformation Ignoring Clip Path

I have a parent div#clipper with a clip-path, which clips a child div#object. When I apply a 3D transformation to #object, no matter the values, the element stops obeying the clip and shows as if no clip was applied.

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;
}

This appears to happen in both Chrome and Firefox. Is there a documented reason why? How can I prevent it?

Upvotes: 3

Views: 1373

Answers (1)

vals
vals

Reputation: 64174

From the CSS specs:

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

It's talking about SVG, but I guess that the same rule extends to non-SVG elements

Upvotes: 1

Related Questions