Geek Answers Handbook

How to get full, smooth rotation with Impress.js?

I use impress.js to create a 3D effect in which you are on four pages, as if they were four walls in a room. A simple rotation of 90 degrees is used to view the next page. Pages are already laid out using 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 going from page four to one takes a long way. As in the case, the rotation is displayed as a rotation of 270 degrees instead of -90, like the rest. If I change the rotation of page 1 to -360 to solve this problem, there will be a transition from page 1 to page 2. How can I make a full transition cycle?

+4
source share
1 answer

As far as I know, this is a limitation of the rendering engine. Surprisingly, this happens even when rotating> 360 degrees. The only workaround I know is to make the animation in 3 steps:

  • approaching 359.9 degrees with the transition.
  • go to 0 degrees without going.
  • End animation with a transition.

By the way, I'm not sure if this is easy to do with impress.js. Maybe try the "invisible" steps?

+1
source

More articles:


All Articles