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

Question

我正在为学校开发一个使用 HTML5 和 CSS3 的元素。该元素的目标是教幼儿如何计算简单的方程式。学习这一点的第一步是教他们识别不同形状的数字。

第一个练习是:显示一个随机数并让 child 选择一个 3D 立方体并将其拖到网格内。网格中立方体的数量当然应该与给定的数量相对应。示例如下:

我不知道从哪里开始。我知道 HTML5 中的 Canvas ，但我不是很熟悉。

当立方体靠近时，我如何才能将它们卡入到位？我什至如何在 HTML5 中绘制 3D 立方体？如何检查屏幕上绘制了多少个立方体？我能不能画一些比立方体更让 children 赏心悦目的东西，但仍然有 3D 效果？

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

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

谢谢

Answer 1

制作可在 ios 浏览器上运行的 genuin 3D 立方体的唯一方法是 css3您可以将此立方体(图形表示)放入将在逻辑上表示其的当前元素，并使用标准浏览器方式来管理拖放 Usefully library由于这是基于 DOM 的实现，因此可以使用 css 设置样式。您可以使用 css3 transition 添加颜色过渡、动画延迟甚至变形。它将比js动画有更好的性能。也更容易实现。Here( video , images ) 是来自 Walt Disney Studios 的非常酷的动画指南，可帮助您使其在视觉上更具吸引力。