我试图对这个链接使用一个效果
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;
}
应该解决问题.
