我正在尝试创建一个由3D立方体堆叠在彼此顶部组成的结构。结构中的每个元素（立方体）都是交互式的。在鼠标悬停事件中，单个立方体具有“反弹”效果，让用户知道立方体是交互式的。在鼠标单击事件中，模式弹出窗口显示有关单个立方体的信息。
我已经能够创建这个的2D版本，但是想知道创建3D版本的最佳方法是什么。目前使用canvas元素来绘制正方形（立方体的2D版本）。我试图为每个canvas元素添加框阴影，但意识到我可能只能对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/