[css3-images][css3-transforms] element() and content with 3D Transforms from Tab Atkins Jr. on 2012-02-24 (www-style@w3.org from February 2012) (original) (raw)

On Fri, Feb 24, 2012 at 2:08 PM, Dirk Schulze <dschulze@adobe.com> wrote:

Hi,

It is not clear how 3D transformation applied to elements references by element() should be treated:

Test

Should 3D transforms still be allowed on referenced elements and their child elements? If they are allowed, how do they apply to the element? In the example above, the element with the id 'content' has another perspective then the reference background element. How should browsers deal with it? Should browsers try to render it, even if the content is behind the background elements (from the perspective)? Should the background element get "flattened" before used as background? If so, how?

If the is in the "paint source" branch, the transform has no effect.

If it's in the "rendered content" branch, you do exactly what the spec says - set up a box the size of the element's border box, and render exactly what's in there. If you've done a transform that pushes the image's rendering outside of its border box geometry, you just don't see anything (the element is drawn over an infinite field of transparent black, so you'll just see the field).

In your specific example, the image will be drawn with its specified transformations, and then taken as a static image and painted into the background of #content. #content's own perspective property has no effect on how the image is drawn. So yes, it's flattened.

~TJ

Received on Friday, 24 February 2012 22:54:54 UTC