本文介绍了-webkit-transform-style:preserve-3d不工作的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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



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

解决方案

我遇到了同样的问题。 preserve-3d似乎没有在某些深层嵌套的代码部分有效果。

  overflow:hidden 



此线平滑了一切。




如果向父类添加overflow:hidden,则preserve-3d将停止生效。

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

应该可以解决问题。


I am trying to use an effect on this link code_on_jsfiddle . The effect is to show the thickness of the coin as it rotates. Code seems to work fine on the jsfiddle but when I tried using it in my codebase it just doesn't work. Please someone suggest me various scenarios where preserve-3d might not work or can there be come other problem.

I tried to find out what the problem can be and I came across link at w3c.org where is written that "so preserving a hierarchy of elements in 3D space requires that each ancestor in the hierarchy have the value ‘preserve-3d’ for ‘transform-style" so I thought that may be any of my ancestor div might not have preserve-3d style but when I tried to simulate such a situation where an ancestor is nor having the preserve-3d style even than the required transition is working link. Use webkit to see the transition on hover. Please help

解决方案

I ran into this same problem. preserve-3d doesn't seem to have an effect in certain deeply nested sections of code. After tweaking all the parent elements, I found the culprit!

overflow: hidden

this line flattens everything.

You can try it here. http://www.webkit.org/blog-files/3d-transforms/transform-style.htmlIf you add overflow: hidden to the parent class, preserve-3d will stop having any effect.

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

should solve the problem.

这篇关于-webkit-transform-style:preserve-3d不工作的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

10-30 09:04