Я пытаюсь создать структуру, состоящую из 3D кубов, сложенных друг на друга. Каждый из элементов (кубов) в структуре неразрешимы. При наведении курсора мыши отдельный куб имеет эффект «отскока», давая пользователю понять, что куб трудно поддающийся обработке. По событию щелчка мыши модальное всплывающее окно показывает информацию об отдельных кубах.
Мне удалось создать 2D-версию, но я не знаю, как лучше создать 3D-версию. В настоящее время используется элемент canvas для рисования квадрата (2d версия куба). Я пытался добавить тени от ячеек к каждому элементу холста, но понял, что смогу сделать это только для элементов div, а не для элементов canvas.
Возможно ли это?
#canvas .box-shadow-3d{
box-shadow: 1px 1px 0px Black,
2px 2px 0px Black,
3px 3px 0px Black,
4px 4px 0px Black,
5px 5px 0px Black,
6px 6px 0px Black;
}
Или мне нужно сделать всю математику, чтобы создать эти кубики? Или было бы лучше использовать элементы div и box-shadows?
Вот что я думаю: -
https://jsfiddle.net/teg0h13k/6/