Fatal编程技术网
  • css/
  • CSS 3D变换容器，用于反转子对象的3D变换

CSS 3D变换容器，用于反转子对象的3D变换

css 3d

CSS 3D变换容器，用于反转子对象的3D变换,css,3d,css-transforms,Css,3d,Css Transforms,在下面的HTML中 <article> <div></div> </article> 注意：在这种情况下，必须使用matrix3d。经过半天的尝试，我终于找到了迄今为止仅适用于webkit的解决方案，其中涉及WebKitCSSMatrix对象 以下是解决方案的外观： 我对matrix3d（）的理解还不够透彻，但你需要对文章应用同样的“反向”版本。蓝色div现在浮在红色div的顶部，我想这是你的问题？我想实现的是，蓝色的图形看起来好像没有

在下面的HTML中

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



注意：在这种情况下，必须使用matrix3d。
经过半天的尝试，我终于找到了迄今为止仅适用于webkit的解决方案，其中涉及WebKitCSSMatrix对象

以下是解决方案的外观：


我对
matrix3d（）
的理解还不够透彻，但你需要对
文章
应用同样的“反向”版本。蓝色div现在浮在红色div的顶部，我想这是你的问题？我想实现的是，蓝色的图形看起来好像没有任何3d变换（矩形），但不是通过变换蓝色的
div
，而是变换红色的
文章。换句话说-扭曲红色对象，使蓝色对象在其原始尺寸中显示为矩形。@Keessonema请查看Safari或Chrome中的示例。我只使用了-webkit-CSS前缀。@thirtydot是的，
WebKitCSSMatrix
发挥了所有的魔力，事实上，正如您所建议的，这里使用的是“反向”矩阵。诀窍是仅将两个对象放置在变换原点的同一点上以实现效果。我更新了JSFIDLE，在div内部文本中显示matrix3d输出：我想避免使用JS，但这个解决方案非常好。。好发现

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