-webkit-transform-style:preserve-3d 不起作用

问题描述 投票:0回答:4

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

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

css webkit
4个回答
28
投票

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

应该可以解决问题。


5
投票

我发现父元素上的

filter
效果导致preserve-3d 被忽略。

我使用

filter: blur()
在项目旋转“远离”观看者时逐渐模糊它们。

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


1
投票

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

希望有帮助!


0
投票

也许添加类似

perspective: 1000px;
的内容。

https://developer.mozilla.org/en-US/docs/Web/CSS/perspective

© www.soinside.com 2019 - 2024. All rights reserved.