-webkit-transform-style: preserve-3d not working

Question

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

Answer 1

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.

Answer 2

Try this - jsFiddle

What I've done:

.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 */
}

I hope that helps!

Answer 3

I found that a filter effect on the parent element was causing preserve-3d to be ignored.

I was using filter: blur() to gradually blur items as they rotated "away" from the viewer.

Moving the filter the child element fixed the problem!