可拖动到网格的3D立方体

Question

我正在研究HTML5和CSS3中的学校项目。 该项目的目标是教幼儿如何计算简单的方程。 学习这一点的第一步是教他们识别不同形状的数字。

第一项练习是： 显示一个随机数并让孩子选择一个3D立方体并将其拖动到网格内。 网格中的立方体数量应与当前数量相对应。 示例如下：

我不知道从哪里开始。我知道HTML5中的画布，但我并不熟悉它。

当它们靠近时如何将立方体捕捉到位？ 我如何在HTML5中绘制3D立方体？ 如何查看屏幕上绘制的多维数据集？ 我可以画一些比立方体看起来更令人愉悦的东西，但仍然有3D效果吗？

最重要的是它能够在iPad上运行吗？ 专用的应用程序是不可能的，因为它也应该能够在桌面上运行。

希望你们中的一些人可能有一个很好的解决方案。

谢谢

Answer 1

制作适用于ios浏览器的genuin 3D立方体的唯一方法是css3 您可以将此多维数据集（图形表示）放入将代表其逻辑的当前元素，并使用标准浏览器方式来管理drag and drop Usefully library，因为这是基于DOM的实现，所以可以使用css进行样式设置。您可以使用css3 transition添加颜色过渡，动画延迟甚至变形，它将比js动画具有更好的性能。它也更容易实现。 这里（video，images）是沃尔特迪斯尼工作室真正很酷的动画指导，可以帮助您提升视觉效果。