多角老虎机在6号角上的旋转效果

Question

我正在一个个人项目中，我有许多符号，并且想垂直旋转它们多次，最后得到一个随机符号。有人能想到使用角度动画旋转动画吗？我只是放了一个代码，它可以正常工作，但看起来却不像实际效果。

 animations: [
    trigger("cardSpinner", [
      state("in", style({ opacity: 1, transform: "translateY(0)" })),
      state("out", style({ opacity: 1, transform: "translateY(-100%)" })),
      transition("in => out", [
        style({ transform: "translateY(0)", opacity: 1 }),
        animate("0.1s", style({ transform: "translateY(-100%)", opacity: 1 }))
      ]),
      transition("out => in", [
        style({ transform: "translateY(100%)", opacity: 1 }),
        animate("0.1s", style({ transform: "translateY(0)", opacity: 1 }))
      ])
    ])
  ]

这是我点击旋转按钮后的代码

animateSlot() {
    var waitTime = 3000;
    this.slots = this.nextSymbols;
    var intervalInstance2 = [];
    this.slots.forEach((slot, index) => {
      this.currentIndex[index] = 0;
      intervalInstance2[index] = setInterval(() => {
        this.currentIndex[index]++;
        if (this.currentIndex[index] == slot.length) {
          this.currentIndex[index] = 0;
        }
        if (this.currentIndex[index] !== 0) {
          slot[this.currentIndex[index] - 1].state = "out";
        } else {
          slot[slot.length - 1].state = "out";
        }
        slot[this.currentIndex[index]].state = "in";
      }, 100);
      setTimeout(() => {
        clearInterval(intervalInstance2[index]);
        slot.forEach(element => {
          element.state = "in";
        });
      }, waitTime);
      waitTime += 1000;
    });

  }

HTML代码类似于

<div class="content-box d-flex justify-content-between flex-column"
             *ngFor="let item of slots">
              <div class="item-box"
                [@cardSpinner]="img.state"
                *ngFor="let img of item">
                <img
                  src="assets/images/slot-machine/{{ img.symbol }}.png"
                  class="img-fluid symbolelement"
                />
              </div>
            </div>

有没有建议看起来像实际的旋转效果。我只是参考了Slot Machine spinning effect in angular2 谢谢，