3D CSS анимация вращения в Firefox не показывает фронт и край монеты - PullRequest
Новая
       17

3D CSS анимация вращения в Firefox не показывает фронт и край монеты

0 голосов
/ 17 февраля 2020

Я сделал CSS анимацию некоторых вращающихся монет для своей домашней страницы.

Она действительно хорошо работает в Chrome (для настольных и мобильных устройств), но мне трудно заставить ее работать в Firefox.

Я должен признать, что мои знания о Firefox довольно ограничены, поэтому я не уверен, с чего начать отладку этого?

Я пытался применить: "transform-style: сохранение-3d;» ко всем элементам, но, похоже, это ничего не меняет?

HTML и CSS немного длинны и превышают ограничение на количество символов здесь при переполнении стека, поэтому я удалил некоторые из края (монеты, состоящие из 80 отдельных DIV), но рабочую анимацию можно увидеть на Codepen здесь: https://codepen.io/lars-ejaas/pen/PowmbVO

    <body>
  <p>Trader Rookie Forex Position Size Calculator</p>
  <p id="no2">Browser Extension for your favorite Internet Browser!</p>
  <div id="getitnow" class="cutout"></div>
 <div id="coin__frame"> 
<div id="chrome__frame">  
  <div id="comingSoon" class="cutout"></div>
<div id=chrome__logo> Google<br> Chrome</div>
<div class="coin Chrome"><a href="https://traderrookie.com" target="_blank" rel="noopener noreferrer" title="Download now for Google Chrome">
  <div class="coin__front"></div>
  <div class="coin__edge">
    <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
    <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
    <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
    <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
     <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
    <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
    <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
    <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
  </div>
  <div class="coin__back"></div>
  <div class="coin__shadow"></div></a>
</div>
  </div>

  <div id="firefox__frame">
 <div id=firefox__logo>Firefox<br> Browser</div>
<div class="coin Firefox"><a href="https://traderrookie.com" target="_blank" rel="noopener noreferrer" title="Download now for Mozilla Firefox">
  <div class="coin__frontF"></div>
  <div class="coin__edge">
    <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
    <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
    <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
    <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
     <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
    <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
    <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
    <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
  </div>
  <div class="coin__back"></div>
  <div class="coin__shadow"></div></a>
</div>  
 </div> 

  <div id="edge__frame">
 <div id=edge__logo>Microsoft<br>Edge</div>
<div class="coin Edge"><a href="https://traderrookie.com" target="_blank" rel="noopener noreferrer" title="Download now for Microsoft Edge">
  <div class="coin__frontE"></div>
  <div class="coin__edge">
    <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
    <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
    <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
    <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
     <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
    <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
    <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
    <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
  </div>
  <div class="coin__back"></div>
  <div class="coin__shadow"></div></a>
</div>  
 </div>
 <div id="opera__frame">  
<div id=opera__logo>Opera</div>
<div class="coin Opera"><a href="https://traderrookie.com" target="_blank" rel="noopener noreferrer" title="Download now for Opera">
  <div class="coin__frontO"></div>
  <div class="coin__edge">
    <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
    <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
    <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
    <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
     <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
    <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
    <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
    <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
  </div>
  <div class="coin__back"></div>
  <div class="coin__shadow"></div></a>
</div>
  </div>
   </div>
  <div id="Forex30" class="cutout"></div>
  <div id="IndexC" class="cutout"></div>   
  <div id="IndexC" class="cutout"></div> 
  <div id="IndexC" class="cutout"></div> 
</body>

body {
  height: 100vh;
  background-image: linear-gradient(135deg, #07a2cc 0%, rgba(7, 162, 204, 0) 70%), linear-gradient(25deg, #0b2dec 10%, rgba(11, 45, 236, 0) 80%), linear-gradient(315deg, #01d1d7 15%, rgba(1, 209, 215, 0) 80%), linear-gradient(245deg, #08ced1 100%, rgba(8, 206, 209, 0) 70%);
}

p {
  margin: 50px 0 0 50px;
  font-family: "Oswald", sans-serif;
  font-size: 40px;
  color: white;
}

p#no2 {
  margin: 0 0 0 50px;
  font-size: 30px;
}

.cutout{
  margin: 10px 0 0 50px; 
  font-family: "Oswald", sans-serif;
  text-transform: uppercase;
  color: white;

  mix-blend-mode: screen;
  border-radius: 20px;
}

.cutout::after{
 left: 50px;
  border-radius: 20px;
  background: white;
  box-shadow: 8px 8px 8px #00000050;
  font-family: "Oswald", sans-serif;
  color: black;
  text-transform: uppercase;
  mix-blend-mode: screen;
  position:absolute;
}

#getitnow {
  height: 70px; 
  width: 225px;
  font-size: 50px;
}

#comingSoon{
z-index: 200;
position: absolute;
left: 170px;
top: 300px;
mix-blend-mode: normal;
}

#comingSoon::after {
  content: 'COMING SOON';
  font-size: 30px;
  padding: 0 10px 0 10px;
  color: hsla(192.56, 93%, 41.36%, 1);
}

#getitnow::after {
  content: 'GET IT NOW';
  font-size: 50px;
  padding: 0 10px 0 10px;
}

#Forex30 {
  height: 40px; 
  width: 600px;
  font-size: 50px;
}

#Forex30::after {
  content: 'combine 30+ currencies to Build any forexpair';
  font-size: 30px;
  padding: 0 10px 0 10px;
}

#IndexC {
   margin-top:20px;
   height: 40px; 
  width: 680px;
  font-size: 50px;
}

#IndexC::after {
  content: 'calculate position sizes for Indicies and commodities ';
  font-size: 30px;
  padding: 0 10px 0 10px;
}

#coin__frame {
  margin-top: 10px;
}

#coin__frame > div {
  margin-left: 220px !important;
  display: inline-flex;
}

.coin {
  position: relative;
  width: 100px;
  height: 100px;
  margin: 50px auto;
  transform-style: preserve-3d;
  animation: rotate3d 3s infinite;
  transition-timing-function: cubic-bezier(0, 0.86, 0.32, 1.28);
  transition: all 3s;
  cursor: pointer;
}

#chrome__logo {
  font-family: "Oswald", sans-serif;
  line-height: 48px;
  font-size: 40px;
  font-weight: bold;
  text-shadow: 2px 2px 4px #00000050;
  color: white;
  background-repeat: no-repeat;
  position: absolute;
  width: 200px;
  height: 80px;
  left: 90px;
  top: 240px;
}

#firefox__logo {
  font-family: "Oswald", sans-serif;
  line-height: 48px;
  font-size: 40px;
  font-weight: bold;
  text-shadow: 2px 2px 4px #00000050;
  color: white;
  background-repeat: no-repeat;
  position: absolute;
  width: 200px;
  height: 80px;
  left: 405px;
  top: 240px;
}

#edge__logo {
  font-family: "Oswald", sans-serif;
  line-height: 48px;
  text-align: left;
  font-size: 40px;
  font-weight: bold;
  text-shadow: 2px 2px 4px #00000050;
  color: white;
  background-repeat: no-repeat;
  position: absolute;
  width: 200px;
  height: 80px;
  left: 760px;
  top: 240px;
}

#opera__logo {
  font-family: "Oswald", sans-serif;
  line-height: 48px;
  text-align: left;
  font-size: 40px;
  font-weight: bold;
  text-shadow: 2px 2px 4px #00000050;
  color: white;
  background-repeat: no-repeat;
  position: absolute;
  width: 200px;
  height: 80px;
  left: 1115px;
  top: 240px;
}


/* Text animations */
#chrome__frame > #chrome__logo,
#firefox__frame > #firefox__logo,
#edge__frame > #edge__logo, 
#opera__frame > #opera__logo {
  transform: scale(0);
  transform-origin: 180px 100px;
  -webkit-transition: transform .5s ease;
  transition: transform .5s ease;
  margin-left: 0px;
}

#chrome__frame:hover > #chrome__logo,
#firefox__frame:hover > #firefox__logo,
#edge__frame:hover > #edge__logo,
#opera__frame:hover > #opera__logo{
  transform: scale(1);
}

.coin.Firefox {
  animation-delay: 0.34s;
}

.coin.Edge {
  animation-delay: 0.68s;
}

.coin.Opera {
  animation-delay: 1.02s;
}

.coin__frontF {
  background-image: url("https://Traderrookie.com/images/ExtensionImages/firefox_Logo2.png"), linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.4));
}

.coin__frontE {
  background-image: url("https://Traderrookie.com/images/ExtensionImages/Microsoft_Edge_logo.png"), linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.4));
}

.coin__frontO {
  background-image: url("https://traderrookie.com/images/ExtensionImages/opera_Logo.png"), linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.4));
}

.coin:hover {
  animation: none;
  transform: rotateY(0deg);
}

.coin__front:hover,
.coin__frontE:hover,
.coin__frontF:hover
.coin__frontO:hover
{
  box-shadow: 8px 8px 8px #00000050;
}

.coin__front,
.coin__frontF,
.coin__frontE,
.coin__frontO,
.coin__back {
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
  background-color: #fff;
}
.coin__front:after,
.coin__frontF:after,
.coin__frontE:after,
.coin__frontO:after,
.coin__back:after {
  content: "";
  position: absolute;
  left: -50px;
  bottom: 100%;
  display: block;
  height: 66.6666666667px;
  width: 200px;
  background: #fff;
  opacity: 0.3;
  animation: shine linear 1.5s infinite;
}

.coin__front {
  background-image: url("https://Traderrookie.com/images/ExtensionImages/chrome_Logo.png"), linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.4));
  background-size: cover;
  transform: translateZ(3px);
}

.coin__back {
  background-image: url("https://Traderrookie.com/images/ExtensionImages/Trader_Rookie_coinface.png"), linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.4));
  background-size: cover;
  transform: translateZ(-3px) rotateY(180deg);
}

.coin__edge div:nth-child(1) {
  position: absolute;
  height: 3.925px;
  width: 6px;
  background: #171717;
  transform: translateY(48.0375px) translateX(47px) rotateZ(94.5deg) translateX(50px) rotateY(90deg);
}
.coin__edge div:nth-child(2) {
  position: absolute;
  height: 3.925px;
  width: 6px;
  background: #212121;
  transform: translateY(48.0375px) translateX(47px) rotateZ(99deg) translateX(50px) rotateY(90deg);
}
.coin__edge div:nth-child(3) {
  position: absolute;
  height: 3.925px;
  width: 6px;
  background: #2a2a2a;
  transform: translateY(48.0375px) translateX(47px) rotateZ(103.5deg) translateX(50px) rotateY(90deg);
}
.coin__edge div:nth-child(4) {
  position: absolute;
  height: 3.925px;
  width: 6px;
  background: #343434;
  transform: translateY(48.0375px) translateX(47px) rotateZ(108deg) translateX(50px) rotateY(90deg);
}
.coin__edge div:nth-child(5) {
  position: absolute;
  height: 3.925px;
  width: 6px;
  background: #3d3d3d;
  transform: translateY(48.0375px) translateX(47px) rotateZ(112.5deg) translateX(50px) rotateY(90deg);
}
.coin__edge div:nth-child(6) {
  position: absolute;
  height: 3.925px;
  width: 6px;
  background: #464646;
  transform: translateY(48.0375px) translateX(47px) rotateZ(117deg) translateX(50px) rotateY(90deg);
}
.coin__edge div:nth-child(7) {
  position: absolute;
  height: 3.925px;
  width: 6px;
  background: #4e4e4e;
  transform: translateY(48.0375px) translateX(47px) rotateZ(121.5deg) translateX(50px) rotateY(90deg);
}
.coin__edge div:nth-child(8) {
  position: absolute;
  height: 3.925px;
  width: 6px;
  background: #565656;
  transform: translateY(48.0375px) translateX(47px) rotateZ(126deg) translateX(50px) rotateY(90deg);
}
.coin__edge div:nth-child(9) {
  position: absolute;
  height: 3.925px;
  width: 6px;
  background: #5e5e5e;
  transform: translateY(48.0375px) translateX(47px) rotateZ(130.5deg) translateX(50px) rotateY(90deg);
}
.coin__edge div:nth-child(10) {
  position: absolute;
  height: 3.925px;
  width: 6px;
  background: #666666;
  transform: translateY(48.0375px) translateX(47px) rotateZ(135deg) translateX(50px) rotateY(90deg);
}
.coin__edge div:nth-child(11) {
  position: absolute;
  height: 3.925px;
  width: 6px;
  background: #6e6e6e;
  transform: translateY(48.0375px) translateX(47px) rotateZ(139.5deg) translateX(50px) rotateY(90deg);
}
.coin__edge div:nth-child(12) {
  position: absolute;
  height: 3.925px;
  width: 6px;
  background: #757575;
  transform: translateY(48.0375px) translateX(47px) rotateZ(144deg) translateX(50px) rotateY(90deg);
}
.coin__edge div:nth-child(13) {
  position: absolute;
  height: 3.925px;
  width: 6px;
  background: #7c7c7c;
  transform: translateY(48.0375px) translateX(47px) rotateZ(148.5deg) translateX(50px) rotateY(90deg);
}
.coin__edge div:nth-child(14) {
  position: absolute;
  height: 3.925px;
  width: 6px;
  background: #838383;
  transform: translateY(48.0375px) translateX(47px) rotateZ(153deg) translateX(50px) rotateY(90deg);
}
.coin__edge div:nth-child(15) {
  position: absolute;
  height: 3.925px;
  width: 6px;
  background: #898989;
  transform: translateY(48.0375px) translateX(47px) rotateZ(157.5deg) translateX(50px) rotateY(90deg);
}
.coin__edge div:nth-child(16) {
  position: absolute;
  height: 3.925px;
  width: 6px;
  background: #909090;
  transform: translateY(48.0375px) translateX(47px) rotateZ(162deg) translateX(50px) rotateY(90deg);
}
.coin__edge div:nth-child(17) {
  position: absolute;
  height: 3.925px;
  width: 6px;
  background: #969696;
  transform: translateY(48.0375px) translateX(47px) rotateZ(166.5deg) translateX(50px) rotateY(90deg);
}
.coin__edge div:nth-child(18) {
  position: absolute;
  height: 3.925px;
  width: 6px;
  background: #9b9b9b;
  transform: translateY(48.0375px) translateX(47px) rotateZ(171deg) translateX(50px) rotateY(90deg);
}
.coin__edge div:nth-child(19) {
  position: absolute;
  height: 3.925px;
  width: 6px;
  background: #a1a1a1;
  transform: translateY(48.0375px) translateX(47px) rotateZ(175.5deg) translateX(50px) rotateY(90deg);
}
.coin__edge div:nth-child(20) {
  position: absolute;
  height: 3.925px;
  width: 6px;
  background: #a6a6a6;
  transform: translateY(48.0375px) translateX(47px) rotateZ(180deg) translateX(50px) rotateY(90deg);
}
.coin__edge div:nth-child(21) {
  position: absolute;
  height: 3.925px;
  width: 6px;
  background: #ababab;
  transform: translateY(48.0375px) translateX(47px) rotateZ(184.5deg) translateX(50px) rotateY(90deg);
}
.coin__edge div:nth-child(22) {
  position: absolute;
  height: 3.925px;
  width: 6px;
  background: #b0b0b0;
  transform: translateY(48.0375px) translateX(47px) rotateZ(189deg) translateX(50px) rotateY(90deg);
}
.coin__edge div:nth-child(23) {
  position: absolute;
  height: 3.925px;
  width: 6px;
  background: #b4b4b4;
  transform: translateY(48.0375px) translateX(47px) rotateZ(193.5deg) translateX(50px) rotateY(90deg);
}
.coin__edge div:nth-child(24) {
  position: absolute;
  height: 3.925px;
  width: 6px;
  background: #b8b8b8;
  transform: translateY(48.0375px) translateX(47px) rotateZ(198deg) translateX(50px) rotateY(90deg);
}
.coin__edge div:nth-child(25) {
  position: absolute;
  height: 3.925px;
  width: 6px;
  background: #bcbcbc;
  transform: translateY(48.0375px) translateX(47px) rotateZ(202.5deg) translateX(50px) rotateY(90deg);
}
.coin__edge div:nth-child(26) {
  position: absolute;
  height: 3.925px;
  width: 6px;
  background: silver;
  transform: translateY(48.0375px) translateX(47px) rotateZ(207deg) translateX(50px) rotateY(90deg);
}
.coin__edge div:nth-child(27) {
  position: absolute;
  height: 3.925px;
  width: 6px;
  background: #c3c3c3;
  transform: translateY(48.0375px) translateX(47px) rotateZ(211.5deg) translateX(50px) rotateY(90deg);
}
.coin__edge div:nth-child(28) {
  position: absolute;
  height: 3.925px;
  width: 6px;
  background: #c7c7c7;
  transform: translateY(48.0375px) translateX(47px) rotateZ(216deg) translateX(50px) rotateY(90deg);
}
.coin__edge div:nth-child(29) {
  position: absolute;
  height: 3.925px;
  width: 6px;
  background: #cacaca;
  transform: translateY(48.0375px) translateX(47px) rotateZ(220.5deg) translateX(50px) rotateY(90deg);
}
.coin__edge div:nth-child(30) {
  position: absolute;
  height: 3.925px;
  width: 6px;
  background: #cccccc;
  transform: translateY(48.0375px) translateX(47px) rotateZ(225deg) translateX(50px) rotateY(90deg);
}
.coin__edge div:nth-child(31) {
  position: absolute;
  height: 3.925px;
  width: 6px;
  background: #cfcfcf;
  transform: translateY(48.0375px) translateX(47px) rotateZ(229.5deg) translateX(50px) rotateY(90deg);
}
.coin__edge div:nth-child(32) {
  position: absolute;
  height: 3.925px;
  width: 6px;
  background: #d1d1d1;
  transform: translateY(48.0375px) translateX(47px) rotateZ(234deg) translateX(50px) rotateY(90deg);
}
.coin__edge div:nth-child(33) {
  position: absolute;
  height: 3.925px;
  width: 6px;
  background: lightgray;
  transform: translateY(48.0375px) translateX(47px) rotateZ(238.5deg) translateX(50px) rotateY(90deg);
}
.coin__edge div:nth-child(34) {
  position: absolute;
  height: 3.925px;
  width: 6px;
  background: #d4d4d4;
  transform: translateY(48.0375px) translateX(47px) rotateZ(243deg) translateX(50px) rotateY(90deg);
}
.coin__edge div:nth-child(35) {
  position: absolute;
  height: 3.925px;
  width: 6px;
  background: #d6d6d6;
  transform: translateY(48.0375px) translateX(47px) rotateZ(247.5deg) translateX(50px) rotateY(90deg);
}
.coin__edge div:nth-child(36) {
  position: absolute;
  height: 3.925px;
  width: 6px;
  background: #d7d7d7;
  transform: translateY(48.0375px) translateX(47px) rotateZ(252deg) translateX(50px) rotateY(90deg);
}
.coin__edge div:nth-child(37) {
  position: absolute;
  height: 3.925px;
  width: 6px;
  background: #d8d8d8;
  transform: translateY(48.0375px) translateX(47px) rotateZ(256.5deg) translateX(50px) rotateY(90deg);
}
.coin__edge div:nth-child(38) {
  position: absolute;
  height: 3.925px;
  width: 6px;
  background: #d8d8d8;
  transform: translateY(48.0375px) translateX(47px) rotateZ(261deg) translateX(50px) rotateY(90deg);
}
.coin__edge div:nth-child(39) {
  position: absolute;
  height: 3.925px;
  width: 6px;
  background: #d9d9d9;
  transform: translateY(48.0375px) translateX(47px) rotateZ(265.5deg) translateX(50px) rotateY(90deg);
}
.coin__edge div:nth-child(40) {
  position: absolute;
  height: 3.925px;
  width: 6px;
  background: #d9d9d9;
  transform: translateY(48.0375px) translateX(47px) rotateZ(270deg) translateX(50px) rotateY(90deg);
}
.coin__edge div:nth-child(41) {
  position: absolute;
  height: 3.925px;
  width: 6px;
  background: #d9d9d9;
  transform: translateY(48.0375px) translateX(47px) rotateZ(274.5deg) translateX(50px) rotateY(90deg);
}
.coin__edge div:nth-child(42) {
  position: absolute;
  height: 3.925px;
  width: 6px;
  background: #d8d8d8;
  transform: translateY(48.0375px) translateX(47px) rotateZ(279deg) translateX(50px) rotateY(90deg);
}
.coin__edge div:nth-child(43) {
  position: absolute;
  height: 3.925px;
  width: 6px;
  background: #d8d8d8;
  transform: translateY(48.0375px) translateX(47px) rotateZ(283.5deg) translateX(50px) rotateY(90deg);
}
.coin__edge div:nth-child(44) {
  position: absolute;
  height: 3.925px;
  width: 6px;
  background: #d7d7d7;
  transform: translateY(48.0375px) translateX(47px) rotateZ(288deg) translateX(50px) rotateY(90deg);
}
.coin__edge div:nth-child(45) {
  position: absolute;
  height: 3.925px;
  width: 6px;
  background: #d6d6d6;
  transform: translateY(48.0375px) translateX(47px) rotateZ(292.5deg) translateX(50px) rotateY(90deg);
}
.coin__edge div:nth-child(46) {
  position: absolute;
  height: 3.925px;
  width: 6px;
  background: #d4d4d4;
  transform: translateY(48.0375px) translateX(47px) rotateZ(297deg) translateX(50px) rotateY(90deg);
}
.coin__edge div:nth-child(47) {
  position: absolute;
  height: 3.925px;
  width: 6px;
  background: lightgray;
  transform: translateY(48.0375px) translateX(47px) rotateZ(301.5deg) translateX(50px) rotateY(90deg);
}
.coin__edge div:nth-child(48) {
  position: absolute;
  height: 3.925px;
  width: 6px;
  background: #d1d1d1;
  transform: translateY(48.0375px) translateX(47px) rotateZ(306deg) translateX(50px) rotateY(90deg);
}
.coin__edge div:nth-child(49) {
  position: absolute;
  height: 3.925px;
  width: 6px;
  background: #cfcfcf;
  transform: translateY(48.0375px) translateX(47px) rotateZ(310.5deg) translateX(50px) rotateY(90deg);
}
.coin__edge div:nth-child(50) {
  position: absolute;
  height: 3.925px;
  width: 6px;
  background: #cccccc;
  transform: translateY(48.0375px) translateX(47px) rotateZ(315deg) translateX(50px) rotateY(90deg);
}

.coin__shadow {
  position: absolute;
  width: 100px;
  height: 6px;
  border-radius: 50%;
  background: #000;
  box-shadow: 0 0 30px 42px #000;
  opacity: 0.125;
  transform: rotateX(90deg) translateZ(-110px) scale(0.5);
}

@keyframes rotate3d {
  0% {
    transform: perspective(1000px) rotateY(0deg);
  }
  100% {
    transform: perspective(1000px) rotateY(360deg);
  }
}
@keyframes shine {
  0%, 25% {
    transform: translateY(200px) rotate(-40deg);
  }
  50% {
    transform: translateY(-100px) rotate(-40deg);
  }
}
...