Javascript 继续动画结束的地方

我有一个3D立方体，根据math.random选择的数字完成两个动画中的一个。动画因向前而结束后将保持其结束位置，但如果单击立方体以再次运行动画，它将返回其原始位置。如何使立方体从上次的结束位置开始完成动画

.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);}
            }

使用过渡而不是动画。 定义阵列面内的过渡 获取一个随机面{x:N，y:N} 加法+=旋转到当前随机面x和y值x。即：x+=360*randomBetweenn，N const EL_dice=document.getElementByIddice； // https://en.wikipedia.org/wiki/Dice 常量面=[ {x:0，y:0}，//1前面 {x:0，y:-90}，//2右 {x:-90，y:0}，//3顶部 {x:90，y:0}，//4底部 {x:0，y:90}，//5左 {x:0，y:180}，//6返回 ]; 函数旋转骰子{ const rand=~~Math.random*6；//生成随机0到5 const face=faces[rand]；//获取随机面 face.x+=360*~~Math.random*4+1；//加上一些x旋转 face.y+=360*~~Math.random*4+1；//加上一些y旋转 console.clear；console.logrand+1； EL_dice.style.cssText=` 转变：3s立方贝塞尔0.2，-0.2,0.5,1.1； 变换：rotateX${face.x}deg rotateY${face.y}deg； `; } EL_dice.addEventListenerclick，spinDice； .骰子透视图{ 显示：内联flex； 透视图：500px； 利润率：20px； 用户选择：无； } .骰子{ -大小：80px；/*在此设置所需的骰子大小*/ -一半：calcvar大小/2； 宽度：变量大小；高度：变量大小； 位置：相对位置； 变换样式：保留-3d； } .dice>div{ 高度：继承；宽度：继承； 位置：绝对位置； 背景：0bf；颜色：fff； 显示器：flex； 对齐项目：居中； 证明内容：中心； 字体大小：calcvar size*1.4； 线高：0； } .front{transform:rotateY0deg translateZvar-half；} .right{变换：旋转90度translateZvar半；} .top{transform:rotateX90deg translateZvar-half；} .bottom{transform:rotateX-90deg translateZvar-half；} .左{变换：旋转-90deg translateZvar-half；} .back{transform:rotateX180deg translateZvar-half；} 单击骰子旋转 &x2680； &x2681； &x2682； &x2683； &x2684； &x2685； 使用过渡而不是动画。 定义阵列面内的过渡 获取一个随机面{x:N，y:N} 加法+=旋转到当前随机面x和y值x。即：x+=360*randomBetweenn，N const EL_dice=document.getElementByIddice； // https://en.wikipedia.org/wiki/Dice 常量面=[ {x:0，y:0}，//1前面 {x:0，y:-90}，//2右 {x:-90，y:0}，//3顶部 {x:90，y:0}，//4底部 {x:0，y:90}，//5左 {x:0，y:180}，//6返回 ]; 函数旋转骰子{ const rand=~~Math.random*6；//生成随机0到5 const face=faces[rand]；//获取随机面 face.x+=360*~~Math.random*4+1；//加上一些x旋转 face.y+=360*~~Math.random*4+1；//加上一些y旋转 console.clear；console.logrand+1； EL_dice.style.cssText=` 转变：3s立方贝塞尔0.2，-0.2,0.5,1.1； 变换：rotateX${face.x}deg rotateY${face.y}deg； `; } EL_dice.addEventListenerclick，spinDice； .骰子透视图{ 显示：内联flex； 透视图：500px； 利润率：20px； 用户选择：无； } .骰子{ -大小：80px；/*在此设置所需的骰子大小*/ -一半：calcvar大小/2； 宽度：变量大小；高度：变量大小； 位置：相对位置； 变换样式：保留-3d； } .dice>div{ 高度：继承；宽度：继承； 位置：绝对位置； 背景：0bf；颜色：fff； 显示器：flex； 对齐项目：居中； 证明内容：中心； 字体大小：calcvar size*1.4； 线高：0； } .front{transform:rotateY0deg translateZvar-half；} .right{变换：旋转90度translateZvar半；} .top{transform:rotateX90deg translateZvar-half；} .bottom{transform:rotateX-90deg translateZvar-half；} .左{变换：旋转-90deg translateZvar-half；} .back{transform:rotateX180deg translateZvar-half；} 单击骰子旋转 &x2680； &x2681； &x2682； &x2683； &x2684； &x2685；

 <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"
                }
}