Can anyone help me with rotating a cube one side at a time using CSS? I can make the cube rotate to the top / bottom and each side correctly, but when I try to rotate to the top or bottom first and then to a side, the cube spins without rotating left or right.
You can check out my codepen example here:
https://codepen.io/exosyphon/pen/yLGOWyL
The expected behavior is to rotate to the bottom (6), then rotate to the right and see another side (4).
However, the current behavior is that it rotates to the bottom (6) but when trying to rotate to the right, only 6 is visible.
I have a feeling this issue might not be solvable with just CSS.
var cube = document.getElementById('cube');
var min = 1;
var max = 24;
var diceX = 0;
var diceY = 0;
document.getElementById('top').onclick = function() {
diceX += 90;
cube.style.transform = 'rotateX('+diceX+'deg) rotateY('+diceY+'deg)';
}
document.getElementById('side').onclick = function() {
diceY += 90;
cube.style.transform = 'rotateX('+diceX+'deg) rotateY('+diceY+'deg)';
}