If we take a closer look at our setup:
<div id="outside">
<div id="inside">Foo</div>
</div>
and apply a rotation to the outer element - let's say turning it 45 degrees clockwise:
<div id="outside" style="transform: rotateZ(-45deg);">
<div id="inside">Foo</div>
</div>
now envision wanting to shift the inner div downwards on the screen.
<div id="outside" style="transform: rotateZ(-45deg);">
<div id="inside" style="transform: translateY(100px);">Foo</div>
</div>
http://jsfiddle.net/du2w91vw/8/
Alas! It has inherited its parents' transformation (which is what I wanted) and shifted downward at a 45-degree angle. How can I move it down vertically in relation to the screen (essentially executing a world-space translation)?
In theory, one could store all parental modifications and calculate accordingly for precise positioning, but then why bother with a structured dom hierarchy? My goal includes leveraging those implicitly acquired transformations!
tl;dr: Can an element's overall transformation be derived without the need to scour the entire DOM tree for inherited shifts or maintaining all parent alterations?
Note: Restriction applies where alteration is not permitted on the outer div.
Edit: Discovery alert! getComputedStyle reveals the matrix. A tad convoluted perhaps (are browsers consistent with matrix format?) yet potentially decipherable.
var t = getComputedStyle(element, null).getPropertyValue('transform')
// e.g. t = "matrix(1, 0, 0, 1, -333, -26)"
Edit edit: Despite functional, getComputedStyle lacks elegance. Sigh, the quest remains for a more elegant solution. How to read individual transform values in JavaScript?