如何在CSS过渡上获得3D骰子的活跃面孔？

Question

var cube = document.getElementById('cube');

var min = 1;
var max = 24;

cube.onclick = function() {
 var xRand = getRandom(max, min);
 var yRand = getRandom(max, min);
   
 cube.style.webkitTransform = 'rotateX('+xRand+'deg) rotateY('+yRand+'deg)';
 cube.style.transform = 'rotateX('+xRand+'deg) rotateY('+yRand+'deg)';
}

function getRandom(max, min) {
 return (Math.floor(Math.random() * (max-min)) + min) * 90;
}

我创建了一个CSS 3d立方体（骰子）。 CSS转换后，它进入静止位置。我需要骰子那张活跃面孔的价值。有什么逻辑吗？