创建三维立方体

我正在尝试创建一个由三维立方体堆叠在一起的结构。结构中的每个元素(立方体)都是难以处理的。在鼠标悬停事件中,单个立方体具有“反弹”效果,让用户知道立方体是难以处理的。在鼠标单击事件中,一个模式弹出窗口显示有关单个多维数据集的信息。

我已经能够创建这个2D版本,但想知道什么是最好的方式来创建3D版本。当前使用画布元素绘制正方形(多维数据集的二维版本)。我试图向每个画布元素添加框阴影,但意识到我可能只能对div元素而不是画布元素这样做。

#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元素和框阴影更好?

https://jsfiddle.net/teg0h13k/6/