Question

我正在使用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以解决此问题，则会从第1页到第2页的转换中断。我将如何制作完整的过渡圈？

Answer 1

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

过渡时动画为359.9度。
移动到0度，没有过渡。
通过转换终止动画。

顺便说一句，我不确定是否可以使用impress.js轻松完成。也许试试'隐形'步骤？

如何使用Impress.js进行完整，无缝的旋转？

1 个答案: