css – -webkit-transform-style：preserve-3d不工作

我试图对这个链接使用一个效果 code_on_jsfiddle.效果是显示硬币在旋转时的厚度.代码似乎在jsfiddle上工作正常,但是当我尝试在我的代码库中使用它时,它不起作用.请有人向我推荐各种场景,其中preserve-3d可能不起作用,否则可能会出现其他问题.

我试图找出问题是什么,我在w3c.org发现了link,其中写道：“所以在3D空间中保留元素的层次结构需要层次结构中的每个祖先的值为”preserve-3d“变换风格“,所以我认为可能是我祖先的任何div可能没有保留的3d风格,但是当我试图模拟这样一种情况,其中一个祖先也没有保存的3d风格甚至比所需的转换正在工作link使用webkit查看悬停时的转换.请帮忙

解决方法

我遇到同样的问题.在某些深入嵌套的代码段中,preserve-3d似乎没有效果.调整所有的父元素后,我发现了罪魁祸首！

overflow: hidden

这条线平直一切.

你可以在这里尝试. http://www.webkit.org/blog-files/3d-transforms/transform-style.html
如果添加溢出：隐藏到父类,preserve-3d将停止有任何效果.

.parent {
    overflow: visible !important;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
}

应该解决问题.

原文地址：https://www.jb51.cc/css/214165.html