Alter box_3dtransforms to correctly apply perspective property #118
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
The 3dtransforms 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 theperspective
property to<div id="sandbox">
, 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
<style>
node just with theperspective
properties, and then toggles on a class calledbox_3dtransforms_perspective
for<div id="sandboxwrap">
. This correctly applies theproperty
styles to the parent container, and now the perspective appears correctly when you toggle on.box_3dtransforms
for thesandbox
div.Here's the way
box_3dtransforms
looks on the current site with rotate set to 45 (without my code, but with a rule added in Chrome Dev Tools and switched off for clarification):And here it is at 45 degrees with my code added:
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 thesandbox
div (including theperspective
styles). The code adds a<style>
node and a class to<div id="sandboxwrap">
, which just happens to be conveniently sitting there assandbox
'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.