.coin-container{perspective:1000px;width:150px;height:150px}.coin{width:100%;height:100%;position:relative;transform-style:preserve-3d;transition:transform .8s}.coin-container.flipping .coin{animation:flip .8s ease-out forwards}.coin.tails-side{transform:rotateY(180deg)}.side{position:absolute;width:100%;height:100%;backface-visibility:hidden;border-radius:50%;display:flex;justify-content:center;align-items:center;font-size:24px;font-weight:700;color:#fff}.heads{background:linear-gradient(45deg,#f3ec78,#af4261);transform:rotateY(0deg)}.tails{background:linear-gradient(45deg,#42a5f5,#472ac5);transform:rotateY(180deg)}@keyframes flip{0%{transform:rotateY(0deg)}to{transform:rotateY(5turn)}}