UserAgent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/57.0.2987.110 Safari/537.36

Example URL:
http://codepen.io/AmeliaBR/pen/a996e563881cf66d15af0e444cac1e02?editors=1000

Steps to reproduce the problem:
1. Create a 3D CSS layout, in which some elements have different z levels.
2. Add a `perspective()` function at the front of the element's transformation stack.

In the linked CodePen, the relevant example is the second SVG.  The first SVG demonstrates the lack of support for `transform-style: preserve-3d` in SVG content (which I'm going to assume is a known issue).

The second SVG is supposed to replace the need for preserve-3d by using `perspective()` in the individual element `transform` properties to replace the perspective from the parent.  The added transforms should have the same result as the perspective/perspective-origin properties in the first SVG.

What is the expected behavior?
In a supporting browser, both SVGs should be identical.  The shapes (or edges of shapes) that are transformed into negative Z coordinates should be rendered smaller than the equivalent lengths at the 0 z coordinate.

Firefox (54 tested) gets it right, albeit with blurry scaling issues.

What went wrong?
Safari and Chrome (including 59.0.3054.0 canary) seem to reverse the perspective scaling from `perspective()` functions: the elements with negative z positions are rendered larger, instead of smaller.

Does it occur on multiple sites: Yes

Is it a problem with a plugin? N/A 

Did this work before? N/A 

Does this work in other browsers? No
 Safari 10

Chrome version: 57.0.2987.110  Channel: stable
OS Version: 10.0
Flash Version: