尝试平滑拖动3D框旋转

Question

我需要一些帮助。我是 JS 新手，正在尝试使 3D 立方体旋转。我在 Code Pen 上找到了一个很酷的例子

https://codepen.io/willbrowning/pen/WQojME

并且想用普通的 JS 做类似的事情。

但是我的版本并不流畅，并且在按住鼠标的同时使立方体旋转时遇到困难。目前它正在等待我完成鼠标移动后再转动。任何简单的提示或建议都会很棒。谢谢！

这是我的代码笔的链接：

type here

https://codepen.io/razorchoice/pen/LYaBqeQ

Answer 1

一些想法：

• 他们的动画比你的更快，这会增加响应时间。
• 我将你的

  .box

  变换属性编辑为

  transform: translate3d(0, 0, 0);

  ，这似乎修复了突然的跳跃
• 他们使用多个 JS 库，例如 Hammer 和 TweenLite
• 您最大的问题之一是您可以通过单击动画来“剪切”动画。所以我做了一个简单的

  setTimeout

  调用以避免重新触发动画。

考虑到所有这些事情，我根据你的笔制作了另一支笔。