Question

In the following HTML

<article>
    <div></div>
</article>

the div is absolutely positioned in an arbitrary position inside the article and transformed with an arbitrary matrix3d.

How to “reverse” the transform of the div by transforming the article, so that the div appears rectangular again in its original size?

Here’s how the situation looks: http://jsfiddle.net/kBWcc/

Note: Usage of matrix3d in this case is obligatory.

Answer 1

After half a day of trying i finally found a so-far webkit-only solution, which involves WebKitCSSMatrix object.

Here’s how a solution looks: http://jsfiddle.net/kBWcc/2/

var t = window.getComputedStyle($('div').get(0)).webkitTransform;
  , m = new WebKitCSSMatrix(t);

$('article').css('-webkit-transform', m.inverse());
$('div').css('-webkit-transform', m.translate(100, 100));​