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 the perspective 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 the perspective properties, and then toggles on a class called box_3dtransforms_perspective for <div id="sandboxwrap">. 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, 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 the sandbox div (including the perspective styles). The code adds a <style> node and a class to <div id="sandboxwrap">, 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.
paulirish
commented
10 years ago
The 3dtransforms styles don't apply perspective properly for me right now at the site. According to the spec, the
perspectiveproperty 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_3dtransformsstyles apply theperspectiveproperty 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 theperspectiveproperties, and then toggles on a class calledbox_3dtransforms_perspectivefor<div id="sandboxwrap">. This correctly applies thepropertystyles to the parent container, and now the perspective appears correctly when you toggle on.box_3dtransformsfor thesandboxdiv.Here's the way
box_3dtransformslooks 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_3dtransformsstyles that are applied to thesandboxdiv (including theperspectivestyles). 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.