CSS 3D 变换容器来反转子项的 3D 变换

Question

在下面的 HTML 中

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

div 绝对定位在 article 内的任意位置，并使用任意 matrix3d 进行转换。

如何通过转换 article 来“反转” div 的转换，使 div 再次以其原始大小显示为矩形？

情况如下:http://jsfiddle.net/kBWcc/

注意:在这种情况下必须使用 matrix3d。

Answer 1

经过半天的尝试，我终于找到了一个目前只有 webkit 的解决方案，其中涉及 WebKitCSSMatrix 对象。

解决方案如下所示: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));​