在结束的地方继续动画

Question

我有一个 3D 立方体，它根据 math.random 选择的数字完成 2 个动画之一。动画结束后保持其结束位置（由于“向前”），但如果单击立方体，再次运行动画，它会返回到其原始位置。如何让立方体从上次的结束位置开始完成动画？

.scene {
                perspective:200px;
                width:100px;
                height:100px;
            }
            .die {
                position:relative;
                width:100%;
                height:100%;
                transform-style:preserve-3d;
                transform: translateZ(-50px);
                transition: transform 1s;
                animation:;
            }
            .face {
                position:absolute;
                width:100px;
                height:100px;
                color:white;
                top:0;
                bottom:0;
                left:0;
                right:0;
                background-color:purple;
            }
 .one {               
                transform: rotateY(0deg) translateZ(50px);
            }
            .two {
                transform:rotateY(90deg) translateZ(50px);
            }
             .three {
                transform:rotateY(180deg) translateZ(50px);
            }
            .four {
                transform:rotateY(-90deg) translateZ(50px);
            }
            .five {
                transform:rotateX(90deg) translateZ(50px);
            }
            .six {
                transform:rotateX(-90deg) translateZ(50px);
            }
            @keyframes one {
                0% {transform: translateZ(-5em) rotateY(0deg) rotateX(0deg);}
                100% {transform: translateZ(-5em) rotateY(0deg) rotateX(360deg);}
            }
            @keyframes two {
                0% {transform: translateZ(-5em) rotateY(0deg) rotateX(0deg);}
                100% {transform: translateZ(-5em) rotateY(-90deg) rotateX(360deg);}
            }

 <div class="scene">
        <div class="die" id="die" onclick="spinDie()">
            <div class="face one">one
            </div>
            <div class="face two">two
            </div>
            <div class="face three">three
            </div>
            <div class="face four">four
            </div>
            <div class="face five">five
            </div>
            <div class="face six">six
            </div>
        </div>
    </div>
        </div>

function spinDie() {
                var num = Math.floor(Math.random() * 1) + 1;
                if (num === 1) {
                   document.getElementById("die").style.animation="one 2s forwards"
                }
                if(num === 2) {
                    document.getElementById("die").style.animation="two 2s forwards"
                }
}

Answer 1

• 使用transition 而不是animation。
• 在数组faces 中定义转换
• 获取随机人脸{x: N, y: N}
• 加法+= 旋转到当前随机面x 和y 值x。即：x += (360 * randomBetween(n, N))

const EL_dice = document.getElementById("dice");

// https://en.wikipedia.org/wiki/Dice
const faces = [
  {x:0,   y:0},   // 1 front
  {x:0,   y:-90}, // 2 right
  {x:-90, y:0},   // 3 top
  {x:90,  y:0},   // 4 bottom
  {x:0,   y:90},  // 5 left
  {x:0,   y:180}, // 6 back
];

function spinDice() {
  const rand = ~~(Math.random() * 6); // Generate random 0 to 5
  const face = faces[rand];           // Get random face
  face.x += 360 * (~~(Math.random() * 4) + 1); // Addup some x spins
  face.y += 360 * (~~(Math.random() * 4) + 1); // Addup some y spins
  console.clear(); console.log(rand + 1);
  EL_dice.style.cssText = `
    transition: 3s cubic-bezier(0.2, -0.2, 0.5, 1.1);
    transform: rotateX(${face.x}deg) rotateY(${face.y}deg);
  `;
}

EL_dice.addEventListener("click", spinDice);

.dice-perspective {
  display: inline-flex;
  perspective: 500px;
  margin: 20px;
  user-select: none;
}

.dice {
  --size: 80px; /* SET HERE THE DESIRED DICE SIZE */
  --half: calc(var(--size) / 2);
  width: var(--size); height: var(--size);
  position: relative;
  transform-style: preserve-3d;
}

.dice>div {
  height: inherit; width: inherit;
  position: absolute;
  background: #0bf; color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--size) * 1.4);
  line-height: 0;
}

.front  {transform: rotateY(0deg)   translateZ(var(--half));}
.right  {transform: rotateY(90deg)  translateZ(var(--half));}
.top    {transform: rotateX(90deg)  translateZ(var(--half));}
.bottom {transform: rotateX(-90deg) translateZ(var(--half));}
.left   {transform: rotateY(-90deg) translateZ(var(--half));}
.back   {transform: rotateX(180deg) translateZ(var(--half));}

Click dice to spin
<div class="dice-perspective">
  <div id="dice" class="dice">
    <div class="front">&#x2680;</div>
    <div class="right">&#x2681;</div>
    <div class="top">&#x2682;</div>
    <div class="bottom">&#x2683;</div>
    <div class="left">&#x2684;</div>
    <div class="back">&#x2685;</div>
  </div>
</div>