-webkit-transform-style：preserve-3d不工作 [英] -webkit-transform-style: preserve-3d not working

问题描述

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

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

解决方案

我遇到了同样的问题。 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; 
} 
  
应该可以解决问题。
 
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.html
If 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不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！