How to start an animation on the position it last ended on

I have a 3D cube that completes one of 2 animations depending on what number is selected by math.random. The animation holds its end position after it has ended (due to "forwards") but if the cube is clicked, to run the animation again, it returns back to its original position. How to I make the cube complete the animation starting from the last time's ending position?

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

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