paulirish/css3please — pull request #118 by raphaelvalerio (2013-03-27 20:19:00+00:00)
Title: Add box_3d_transforms to correctly apply perspective property

The 3d_transforms styles don't apply perspective properly for me right now at the site. According to the spec, the `perspective` property needs to be applied to the *parent* container of the element with the transforms, not the element itself. Right now at the site, the `.box_3dtransforms` styles apply the `perspective` property to `

`, not its parent container, so perspective doesn't work (the rotated box is squished, without any 3d perspective). That's my experience with Chrome 25, Firefox 19, and IE 10 (Opera of course doesn't support 3d transforms), so they all seem to be implementing the spec as written.

So I have added some code to javascript.js which creates an additional `

`. This correctly applies the `property` styles to the parent container, and now the perspective appears correctly when you toggle on `.box_3dtransforms` for the `sandbox` div.

Here's the way `box_3dtransforms` looks on the current site with rotate set to 45 (without my code):

![css3please-3dtransforms-01](https://f.cloud.github.com/assets/2926788/310359/58553a1e-971a-11e2-8d12-b5f27af079a8.png)

And here it is at 45 degrees with my code added:

![css3please-3dtransforms-02](https://f.cloud.github.com/assets/2926788/310369/6fb12a1a-971a-11e2-8990-0e4848854c16.png)

I wanted to muck around with the code as little as possible, so I limited the changes to be all in one place. This might be a little more inelegant, but it means I'm only changing one JS function. I leave all the `box_3dtransforms` styles that are applied to the `sandbox` div (including the `perspective` styles). The code adds a `

`, which just happens to be conveniently sitting there as `sandbox`'s parent container, waiting to help out.

I've tested this on Chrome 25 and Firefox 19.

Please consider pulling in these changes as the site cannot help users who want to see proper perspective on 3d transforms as it stands now.