изометрия c расчеты для вращения цилиндра (монеты)

Question

Я пытаюсь сделать вращающийся цилиндр (монету) из ванили CSS (или JS, если это невозможно). Я могу сделать это нормально для вида сбоку, но я пытаюсь сделать это в виде «isometri c».

Я знаю, как создать изометрию c вид для вещей, которые находятся на «нормальном» «Плоскости (вертикальные, горизонтальные или« напольные ») с помощью преобразований.

Я также могу понять, как вращать кубы и т. д. c. с несколькими трюками с skew.

Однако я застрял, пытаясь вращать цилиндр. Я предполагаю, что это связано с тем, что самая дальняя часть от центра трансформируется иначе, чем детали, расположенные ближе к центру оси вращения.

Ниже находится CSS только вращающаяся монета (почти, пара незначительные ошибки, но вы поняли) но у меня есть ощущение, что мне нужно было бы это исправить и начать снова, чтобы получить видимую верхнюю часть и правильное вращение.

Как правильно обрабатывать углы, которые не ' t прямо вперед, чтобы получить правильную перспективу?

Я также счастлив с чистым JS решением, использующим canvas, если это не может быть достигнуто с CSS.

body {
  background-color: #353535;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  transform-style: preserve-3d;
}
.coin-holder{
  width: 250px;
  height: 250px;
}
.coin {
  height: 250px;
  width: 250px;
  position: relative;
  transform-style: preserve-3d;
  transform-origin: 50%;
  animation: spin 10s infinite;
  animation-timing-function: linear;
}
.coin .front, .coin .back {
  position: absolute;
  height: 100%;
  width: 100%;
  border-radius: 50%;
  background-size: cover;
  overflow: hidden;
}
.coin .front {
  transform: translateZ(25px);
}
.coin .back {
  transform: translateZ(-25px) rotateY(180deg);
}
.coin .side {
  transform: translateX(100px);
  transform-style: preserve-3d;
  backface-visibility: hidden;
}
.coin .side .circle {
  height: 250px;
  width: 50px;
  position: absolute;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}
.coin .side .circle:before, .coin .side .circle:after {
  content: '';
  display: block;
  height: 26px;
  width: 50px;
  position: absolute;
  transform: rotateX(84.375deg);
  background: #999900;
}
.coin .side .circle:before {
  transform-origin: top center;
}
.coin .side .circle:after {
  bottom: 0;
  transform-origin: center bottom;
}
.coin .side .circle:nth-child(1) {
  transform: transform: skewY(30deg);rotateY(90deg) rotateX(11.25deg);
}
.coin .side .circle:nth-child(2) {
  transform: rotateY(90deg) rotateX(22.5deg);
}
.coin .side .circle:nth-child(3) {
  transform: rotateY(90deg) rotateX(33.75deg);
}
.coin .side .circle:nth-child(4) {
  transform: rotateY(90deg) rotateX(45deg);
}
.coin .side .circle:nth-child(5) {
  transform: rotateY(90deg) rotateX(56.25deg);
}
.coin .side .circle:nth-child(6) {
  transform: rotateY(90deg) rotateX(67.5deg);
}
.coin .side .circle:nth-child(7) {
  transform: rotateY(90deg) rotateX(78.75deg);
}
.coin .side .circle:nth-child(8) {
  transform: rotateY(90deg) rotateX(90deg);
}
.coin .side .circle:nth-child(9) {
  transform: rotateY(90deg) rotateX(101.25deg);
}
.coin .side .circle:nth-child(10) {
  transform: rotateY(90deg) rotateX(112.5deg);
}
.coin .side .circle:nth-child(11) {
  transform: rotateY(90deg) rotateX(123.75deg);
}
.coin .side .circle:nth-child(12) {
  transform: rotateY(90deg) rotateX(135deg);
}
.coin .side .circle:nth-child(13) {
  transform: rotateY(90deg) rotateX(146.25deg);
}
.coin .side .circle:nth-child(14) {
  transform: rotateY(90deg) rotateX(157.5deg);
}
.coin .side .circle:nth-child(15) {
  transform: rotateY(90deg) rotateX(168.75deg);
}
.coin .side .circle:nth-child(16) {
  transform: rotateY(90deg) rotateX(180deg);
}
.coin .front {
  background: yellow;
}
.coin .back {
  background: yellow;
}
.coin .front, .coin .back {
  overflow: hidden;
}
.coin .front:before, .coin .back:before {
  content: '';
  position: absolute;
  left: -50px;
  height: 250%;
  width: 30%;
  background: white;
  transform: skew(45deg);
  animation: shine 5s infinite;
}

@keyframes shine {
  30% {
    left: 500px;
  }
  50% {
    left: 500px;
  }
  100% {
    left: 500px;
  }
}
@keyframes spin {
  0% {
    transform: rotateY(0deg) skewY(-10deg);
  }
  25% {
    transform: rotateY(90deg) skewY(0deg);
  }
  50% {
    transform: rotateY(180deg) skewY(10deg);
  }
  75% {
    transform: rotateY(270deg) skewY(0deg);
  }
  100% {
    transform: rotateY(360deg) skewY(-10deg);
  }
}
#gradient {
  width: 400px;
  height: 30px;
  background-image: radial-gradient(black, transparent, transparent);
  animation: scale 2.5s infinite;
  animation-timing-function: linear;
  animation-direction: alternate;
  filter: url(#blur);
}

@keyframes scale {
  0% {
    transform: scaleX(1);
  }
  100% {
    transform: scaleX(0.3);
  }
}

<div style="display:flex; flex-flow:column; align-items:center">
<div class="coin-holder">

  <div class="coin">
    <div class="front"></div>
    <div class="side">
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
    </div>
    <div class="back"></div>
  </div>
  </div>
  <br>
  <div id="gradient"></div>
  
  <svg style="display:none">
    <filter id="blur" x="-20%" y="-20%" width="200%" height="200%" filterUnits="objectBoundingBox">
      <!-- filter operations here -->
      <feGaussianBlur in="SourceGraphic" stdDeviation="5">
      </feGaussianBlur></filter>
  </svg>
</div>

В соответствии с просьбой монета изометрии c выглядит следующим образом (изображение stati c) - очевидно, что показать вращающуюся монету невозможно, иначе я бы знаете, как это сделать!

Я пытаюсь вращаться вокруг оси Y.

Вот ссылка на изображение , показывающее различные углы поворота (я сделал не хотите загружать изображение без лицензии)

Ниже приведен пример изображения под одним углом.