JSFiddle - React, Tailwind, and code Playground

HTML

<div class="parent1">
<div class="parent2">
    <div class="coin"></div>
<div>
</div>

CSS

.parent1{
    width:100%;
    height: 100%;
    background-color:blue;
    //-webkit-transform-style: preserve-3d;
}
.parent2 {
    //-webkit-transform-style: preserve-3d;
    width:100%;
    height:100%;
    background-color:yellow;
}
.coin{
        margin:auto;
        width: 94px;
            height: 94px;
            -webkit-transform: perspective(500px);  
            vertical-align: middle;
            -webkit-transition: -webkit-transform 1s linear;
            border-radius: 100%;
            position: relative;
            display:inline-block;
            background-size: 100% 100%;        
            background: url("http://www.coolemails4u.com/wp-content/uploads/2010/10/indian_rupee.png") no-repeat center;
          position:relative;
            -webkit-transform-style: preserve-3d;

          z-index: 0;        
    }        
.coin:after {
    background-color: #262626;
        background-image: -webkit-linear-gradient(hsla(0,0%,100%,.25), hsla(0,0%,0%,.25));
        bottom: 0;
        content: '';
        left: 47px;
        position: absolute;
        top: 0;
        width: 5px;
        z-index: -10;
        -webkit-transform: rotateY(-90deg);
        -webkit-transform-origin: 100% 50%;
}
.coin:hover{
    -webkit-transform: rotateY(90deg);
}