Children perspective example doesn't have same vanishing point in Firefox

[desandro]

In Firefox 11.0a2, the vanishing point in the children example doesn't line up as it should. There must be something I'm missing as other examples have the same vanishing point.

http://desandro.github.com/3dtransforms/examples/perspective-02-children.html

@louisremi - would you mind taking a look?

[louisremi]

Interesting, which one do you think is right? I'd say Firefox but I should give a better look at the spec. Last IE10 preview has 3D Transform, hasn't it? How does it render it? (I don't have any win7 VM here)

[desandro]

I am arguing that WebKit is right. The container has perspective. From the CSS 3D Transform spec

The ‘perspective’ property applies the same transform as the perspective() transform function, except that it applies only to the positioned or transformed children of the element, not to the transform on the element itself. ... The use of this property with any value other than ‘none’ establishes a stacking context. It also establishes a containing block (somewhat similar to position:relative), just like the ‘transform’ property does.

Thus, it has perspective-origin

The ‘perspective-origin’ property establishes the origin for the perspective property. It effectively sets the X and Y position at which the viewer appears to be looking at the children of the element.

Both of these properties mention how the effect is applied to the children. In this example, the container has perspective, so all children are a part of that 3D environment, the perspective origin for all of them is in the center of the container, not in the each of each child.

If you concur, can you submit a bug to the Mozilla team?

[desandro]

I've opened Bug 726397

[desandro]

Looking good in Firefox 19