5.6K views
1.coin { 2 font-size: 200px; 3 width: 0.1em; 4 height: 1em; 5 background: linear-gradient(#faa504, #141001); 6 margin: auto; 7 position: absolute; 8 top: 0; 9 left: 0; 10 right: 0; 11 bottom: 0; 12 animation: rotate_4001510 7s infinite linear; 13 transform-style: preserve-3d; 14} 15 16.coin .side, .coin:before, .coin:after { 17 content: ""; 18 position: absolute; 19 width: 1em; 20 height: 1em; 21 overflow: hidden; 22 border-radius: 50%; 23 right: -0.4em; 24 text-align: center; 25 line-height: 1; 26 transform: rotateY(-90deg); 27 -moz-backface-visibility: hidden; 28 -webkit-backface-visibility: hidden; 29 backface-visibility: hidden; 30} 31 32.coin .tails, .coin:after { 33 left: -0.4em; 34 transform: rotateY(90deg); 35} 36 37.coin:before, .coin:after { 38 background: linear-gradient(#faa504, #141001); 39 backface-visibility: hidden; 40 transform: rotateY(90deg); 41} 42 43.coin:after { 44 transform: rotateY(-90deg); 45} 46 47@keyframes rotate_4001510 { 48 100% { 49 transform: rotateY(360deg); 50 } 51} 52 53.svg_back { 54 transform: scaleX(-1); 55} 56
MIT License