Changing Stylesheet Rule Dynamically Based on Width of Container on Resize

So I've ran into a really rare situation. I'm building a site that's responsive. The div containers widths values are in percentages. The boxes were created into those cool 3d boxes that when you hover over they rotate and reveal the other side in a 3D perspective view. Now the problem I ran into is that css "transform-origin" z value must be a fixed amount, no percentages, along with transform: translateZ(value).

Now essentially what I've thought of doing is reading the width of the containers on resize and editing the value in the stylesheet accordingly.

I've tried reading the stylesheet with javascript and id but the cssRules returns null.

So basically my question is how can I on resize, read the width of the containers and every time it resizes edit the rule to the right value.

I'm open to Javascript or PHP.