-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

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!