Question

我正在尝试对此链接code_on_jsfiddle使用效果。效果是显示硬币旋转时的厚度。代码似乎在jsfiddle上正常工作，但是当我尝试在我的代码库中使用它时，它只是不起作用。请有人建议我使用保存-3d可能不起作用的各种情况，或者可能会出现其他问题。

我试图找出问题所在，我在w3c.org遇到了link，其中写着＆＃34;因此保留3D空间中元素的层次结构需要层次结构中的每个祖先对于'transform-style＆＃34;具有'preserve-3d'的值所以我认为这可能是我的任何祖先div可能没有保留-3d风格，但当我试图模拟这样一种情况，即祖先也没有保留-3d风格，甚至比所需的转换工作link 。使用webkit查看悬停时的转换。请帮忙

Answer 1

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

overflow: hidden

这条线压平了一切。

你可以在这里试试。 http://www.webkit.org/blog-files/3d-transforms/transform-style.html 如果将overflow：hidden添加到父类，则preserve-3d将停止生效。

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

应该解决问题。

Answer 2

我发现父元素的filter效果导致了preserve-3d被忽略。

我正在使用filter: blur()逐渐模糊项目，因为它们会从观看者“离开”。

移动过滤器子元素解决了问题！

Answer 3

试试这个 - jsFiddle

我做了什么：

.coin {
    background-image: url("http://www.coolemails4u.com/wp-content/uploads/2010/10/indian_rupee.png");
    background-size: 100% 100%;
    border-radius: 100%;
    height: 100px;
    margin: 50px auto;
    position: relative;
    width: 100px;
    -webkit-transition: .5s linear;
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden; /* I added this */
}

我希望有所帮助！

-webkit-transform-style：preserve-3d无效

3 个答案: