Как повернуть CSS 3D-объект при помощи JS?

Question

[Андрей Кунцевич]

Собрал кубик на css

Но сколько ни боролся с matrix3d (хабр), или с rotate3d (stackowerflow), так и не смог осилить его управляемый поворот.

Сейчас пришёл к тому, чтобы методом тыка определять углы, чтобы потом как-то попытаться их использовать,
вот какие нашёл:

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*/

Но я уверен, что это убогий метод, и я с ним получу только геморрой.

Подскажите функцию на JS для исходной позиции, например, rotate3d(-30, -30, 0, 30deg) получить новые значения для поворота на 90deg вверх/вправо/влево/вниз.

Answer 1

[Алексей Склейнов]

Не уверен ( не делал подобную реализацию), но можно попробовать присваивать определенный класс объекту посредством js и прописать для каждого класса свои условия css, плюс использовать анимацию.