CODEWITHSUNDEEP
css3dcss-transforms
Ernests Karlsons
Ernests Karlsons

Reputation: 2230

CSS 3D transform container to reverse the 3D transform of the child

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.

Upvotes: 1

Views: 1338

Answers (1)

Ernests Karlsons
Ernests Karlsons

Reputation: 2230

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));​

Upvotes: 2

Related Questions