How to get a full, seamless rotation with Impress.

问题:

I'm using impress.js to create a 3D effect in which you are inside four pages, as if they were four walls in a room. To view the next page, a simple -90 degree rotation is used. The pages are already laid out with impress.js using:

//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">

This works, except that the transition from page four to one takes the "long way" around. As in, the rotation is displayed as a 270 degree rotation instead of -90 as the others. If I change page 1 rotation to -360 to solve this, transition from page one to page two is broken. How would I go about making a full circle of transitions?

回答1:

As far as I know, this is a render engine limitation. Surprisingly, it occurs even when the rotation is > 360 degree. The only workaround I know is to do the animation in 3 steps:

1. animate to 359.9 degree with transition.
2. move to 0 degree with no transition.
3. terminate the animation with a transition.

By the way, I'm not sure whether this can be easily done with impress.js. Maybe give it a try with 'invisible' steps ?