How to rotate CSS 3D object using JS?

Question

css

I collected a cube on css

But no matter how much I struggled with matrix3d ​​( habr ) , or with rotate3d ( stackowerflow ) , I could not master its controlled rotation.
Now I have come to determine the angles by typing, so that later I can somehow try to use them,
here are the ones I found:

rotateX(-20deg) rotateY(-20deg) rotateZ(-7deg) /*front*/
rotateX(70deg) rotateY(-7deg) rotateZ(20deg) /*up*/
rotateX(-110deg) rotateY(7deg) rotateZ(-20deg) /*down*/
rotateX(160deg) rotateY(20deg) rotateZ(7deg) /*back V*/
rotateX(-20deg) rotateY(160deg) rotateZ(7deg) /*back H*/
rotateX(0deg) rotateY(-110deg) rotateZ(20deg) /*left*/
rotateX(0deg) rotateY(70deg) rotateZ(-20deg) /*right*/

But I am sure that this is a poor method, and I will only get hemorrhoids with it.
Prompt a JS function for the initial position, for example rotate3d(-30, -30, 0, 30deg) to get new values ​​for 90deg rotation up/right/left/down.

Answer 1

I'm not sure (didn't make such an implementation), but you can try to assign a specific class to an object using js and set your own css conditions for each class, plus use animation.