такое делать на css избыточно
представьте только, какое количество перерисовок понадобится, cpu вам спасибо не скажет
лучший вариант - работа с gpu (проще в тему зайти через библиотеку threejs, сам glsl порой может обить всё желание)
отрисовка и анимация куба, хоба:
//создаем сцену
const scene = new THREE.Scene();
//создаем камеру на основе ширины и высоты окна
const camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight);
//создаем рендерер, определяем его размеры
const renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(window.innerWidth,window.innerHeight);
//отрисовываем в нужном месте
$('body').append(renderer.domElement);
//создаем меш (состоит из геометрии и материала)
const geometry = new THREE.BoxGeometry(1,1,1);
const material = new THREE.MeshBasicMaterial({color: 0xff0000});
const cube = new THREE.Mesh(geometry,material);
//добавляем его на сцену
scene.add(cube);
//позиционируем
cube.position.z = -5;
cube.rotation.x = 10;
cube.rotation.y = 5;
//рендерим
renderer.render(scene,camera);
//добавляем анимацию
let animate = function(){
//задаем вращение
cube.rotation.x += 0.01;
renderer.render(scene,camera);
//просим у браузера обновлять анимацию перед каждой перерисовкой
requestAnimationFrame(animate);
}
animate();
пожалуйста,
примеров куча
если говорить о математике, то нужна линейная алгебра и чуток тригонометрии
речи о докторской степени не идет, но понимание базовых принципов только сыграют на руку
