.coin{margin:150px auto;position:relative;width:300px;height:300px;transition:5s linear;transform-style:preserve-3d;display:none}.coin.__active{display:block}.anim{animation:coin-anim 2s linear}@keyframes coin-anim{100%{transform:rotateY(360deg)}}.coin:after{bottom:0;content:'';left:150px;position:absolute;top:0;width:5px;transform:rotateY(-90deg);transform-origin:100% 50%}#coin-1 .back,#coin-1 .front{background-size:100% 100%;width:100%;height:100%;border-radius:50%}#coin-2 .back,#coin-2 .front{background-size:100% 100%;width:100%;height:100%;border-radius:50%}#coin-3 .back,#coin-3 .front{background-size:100% 100%;width:100%;height:100%;border-radius:50%}.back{position:absolute;top:0;transform:translateZ(-5px) rotateY(-180deg)}.back-inner,.front-inner{border-radius:50%;position:absolute;left:0;top:0;height:100%;width:100%;background-color:#ffaf03}.front-inner{transform:translateZ(-1px)}.back-inner{transform:translateZ(-4px)}