Hogyan tudnék egy CSS-el animált (össze-vissza forgó) dobó kockát random 6 fix pozícióban gombnyomásra megállítani?

Így miért nem működik:

<div id='roll' class='roll-button'><button>Roll dice!</button></div>

</div>

<script>

var elDiceOne = document.getElementById('dice1');

var elComeOut = document.getElementById('roll');

var diceOne = Math.floor((Math.random() * 6) + 1);

console.log(diceOne);

var i = 1;

do {

i = 1;

for (i; i <= 6; i++) {

elDiceOne.classList.remove('show-' + i);

if (diceOne === i) {

elDiceOne.classList.add('show-' + i);

}

}

setTimeout(rollDice(), 1000);

}

while (elComeOut.onclick = function () {rollDice();});

</script>

Elvileg addig kéne fogatnia ezen pozíciók között:

.show-1 {

transform: rotateX(720deg) rotateZ(-720deg); }

.show-6 {

transform: rotateX(-900deg) rotateZ(1080deg); }

.show-3 {

transform: rotateY(-450deg) rotateZ(-1440deg); }

.show-4 {

transform: rotateY(810deg) rotateZ(720deg); }

.show-5 {

transform: rotateX(-810deg) rotateZ(-1080deg); }

.show-2 {

transform: rotateX(450deg) rotateZ(-720deg); }

amíg meg nem nyomom a gombot.