问题
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:
- animate to 359.9 degree with transition.
- move to 0 degree with no transition.
- 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 ?
来源：https://stackoverflow.com/questions/11298185/how-to-get-a-full-seamless-rotation-with-impress-js