13

我正在尝试对此链接code_on_jsfiddle使用效果。效果是显示硬币旋转时的厚度。代码似乎在 jsfiddle 上运行良好，但是当我尝试在我的代码库中使用它时，它就不起作用了。请有人向我建议preserve-3d 可能无法工作或可能出现其他问题的各种场景。

我试图找出问题可能是什么，我在 w3c.org 上找到了链接，其中写道“因此在 3D 空间中保留元素的层次结构要求层次结构中的每个祖先都具有值 'preserve-3d' for ' transform-style”，所以我认为可能是我的任何祖先 div 可能没有保留 3d 样式，但是当我尝试模拟这样一种情况时，祖先没有保留 3d 样式，即使所需的转换正在工作链接. 使用 webkit 查看悬停时的过渡。请帮忙

4

3 回答 3

21

我遇到了同样的问题。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;
}

应该解决问题。

于 2013-03-29T14:04:29.447 回答
4

我发现filter对父元素的影响导致preserve-3d 被忽略。

filter: blur()当它们从查看器“远离”旋转时，我用来逐渐模糊项目。

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

于 2016-08-13T09:46:34.703 回答
0

试试这个 - 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 */
}

我希望这会有所帮助！

于 2012-07-26T21:45:10.793 回答