title: -webkit-transform-style: preserve-3d not working
body: <p>I am trying to use an effect on this link <a href="http://jsfiddle.net/54Pa7/">code_on_jsfiddle</a> . 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.</p>
  
  <p>I tried to find out what the problem can be and I came across <a href="http://dev.w3.org/csswg/css3-3d-transforms/#transform-style">link</a> 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 <a href="http://jsfiddle.net/cETBj/4/">link</a>. Use webkit to see the transition on hover. Please help</p>