@keyframes flip{0%{transform:scaleX(1) rotateX(0deg)}50%{transform:scale3d(1.5,1.5,1.5) rotateX(10turn)}to{transform:scaleX(1) rotateX(20turn)}}.coin{width:160px;height:160px;position:relative;transform-style:preserve-3d;transition:transform .1s;margin:0 auto}.coin.flipping{animation:flip 3s cubic-bezier(.45,.05,.55,.95) forwards}.side{position:absolute;width:100%;height:100%;display:flex;align-items:center;justify-content:center;backface-visibility:hidden;transform-style:preserve-3d;box-shadow:0 0 20px rgba(0,0,0,.2);overflow:hidden}.heads,.side{border-radius:50%}.heads{background:linear-gradient(135deg,gold,#ffc800 50%,#b8860b);transform:translateZ(4px)}.tails{background:linear-gradient(135deg,#daa520,peru 50%,#8b4513);transform:rotateY(180deg) translateZ(4px);border-radius:50%}.edge{width:100%;transform:rotateX(90deg);transform-style:preserve-3d}.edge,.edge:before{position:absolute;height:100%}.edge:before{content:"";width:8px;background:linear-gradient(90deg,#b8860b,#daa520);transform:translateX(-50%) rotateY(90deg);left:50%}.content{display:flex;align-items:center;justify-content:center;width:100%;height:100%;color:hsla(0,0%,100%,.9);text-shadow:2px 2px 4px rgba(0,0,0,.3);font-family:serif;letter-spacing:1px}.coin.heads{transform:rotateY(0deg)}.coin.tails{transform:rotateY(180deg)}