아이소메트릭

<div class="scene">
  <div class="cube c1"><svg viewBox="0 0 100 100"><polygon class="top" points="50,10 90,32 50,54 10,32"/><polygon class="left" points="10,32 50,54 50,98 10,76"/><polygon class="right" points="50,54 90,32 90,76 50,98"/></svg></div>
  <div class="cube c2"><svg viewBox="0 0 100 100"><polygon class="top" points="50,10 90,32 50,54 10,32"/><polygon class="left" points="10,32 50,54 50,98 10,76"/><polygon class="right" points="50,54 90,32 90,76 50,98"/></svg></div>
  <div class="cube c3"><svg viewBox="0 0 100 100"><polygon class="top" points="50,10 90,32 50,54 10,32"/><polygon class="left" points="10,32 50,54 50,98 10,76"/><polygon class="right" points="50,54 90,32 90,76 50,98"/></svg></div>
</div>

.scene{display:flex;align-items:flex-end;gap:min(5vmin,16px)}
.cube{animation:bob 3.2s ease-in-out infinite}
.cube svg{display:block;width:100%;height:auto;overflow:visible;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.18))}
.c1{width:min(17vmin,64px);animation-delay:0s}
.c2{width:min(28vmin,108px);animation-delay:.35s}
.c3{width:min(14vmin,52px);animation-delay:.7s}
.c1 .top{fill:#a9c4ff}.c1 .left{fill:#7a9bf0}.c1 .right{fill:#5876cc}
.c2 .top{fill:#ffd08a}.c2 .left{fill:#f2a75a}.c2 .right{fill:#c9843c}
.c3 .top{fill:#8fe0ae}.c3 .left{fill:#5fbf85}.c3 .right{fill:#3d9c66}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8%)}}