CSS 3D 变换容器来反转孩子的 3D 变换答案

【问题标题】：CSS 3D transform container to reverse the 3D transform of the childCSS 3D 变换容器来反转孩子的 3D 变换
【发布时间】：2012-06-21 01:27:41
【问题描述】：

在以下 HTML 中

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

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

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

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

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

【问题讨论】：

我对@987654328@ 的理解不够深入，但您需要将同一事物的“反转”版本应用于article。
蓝色 div 现在漂浮在红色 div 之上，我认为这是您的问题？
我想要实现的是蓝色图形看起来好像没有任何 3d 变换（矩形），但不是通过变换蓝色 div，而是红色 article .换句话说 - 扭曲红色对象，使蓝色对象在其原始尺寸中显示为矩形。
@KeesSonnema 请查看 Safari 或 Chrome 中的示例。我只使用了 -webkit- CSS 前缀。
@thirtydot 是的，WebKitCSSMatrix 做了所有的魔法，事实上，正如你所建议的，这里是“倒置”矩阵。诀窍只是将两个对象放在同一变换原点上以实现效果。然后可以再次“翻译”它们。

标签： css 3d css-transforms

【解决方案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));

【讨论】：

我更新了你的 jsfiddle 以在 div 内部文本中显示 matrix3d 输出：jsfiddle.net/brcaswell/kBWcc/8 我想避免使用 JS，但这个解决方案非常好.. 很好的发现