如何使用 Impress.js 获得完整、无缝的旋转？答案

【问题标题】：How to get a full, seamless rotation with Impress.js?如何使用 Impress.js 获得完整、无缝的旋转？
【发布时间】：2012-07-02 17:15:15
【问题描述】：

我正在使用 impress.js 来创建一个 3D 效果，其中您处于四个页面内，就好像它们是一个房间里的四堵墙。要查看下一页，使用简单的 -90 度旋转。页面已经使用 impress.js 进行布局：

//page 1
<div id="title" class="step" data-x="0" data-y="0" data-z="0">

//page 2
<div id="about" class="step" data-x="2000" data-y="0" data-z="2000" data-rotate-y="-90">

//page 3
<div id="our_work" class="step" data-x="0" data-y="0" data-z="4000" data-rotate-y="-180">

//page 4
<div id="contact" class="step" data-x="-2000" data-y="0" data-z="2000" data-rotate-y="-270">

这可行，只是从第四页到第一页的转换需要“很长的路”。如中，旋转显示为 270 度旋转，而不是其他 -90 度。如果我将第 1 页的旋转更改为 -360 以解决此问题，则从第一页到第二页的转换会中断。我将如何进行完整的转换循环？

【问题讨论】：

您能单独处理每个 90 度旋转吗？我不知道 Impress.js，但大概它会触发一个 onComplete 回调，如果剩余超过零度，您可以从中调用下一个旋转？
据我了解，每次平移、旋转等都是相对于原点的。

标签： javascript rotation impress.js

【解决方案1】：

据我所知，这是渲染引擎的限制。令人惊讶的是，即使旋转 > 360 度也会发生这种情况。我知道的唯一解决方法是分三步制作动画：

使用过渡动画到 359.9 度。
移动到 0 度，没有过渡。
用过渡结束动画。

顺便说一句，我不确定这是否可以通过 impress.js 轻松完成。也许试试“隐形”步骤？

【讨论】：