4

impress.js を使用して、部屋の 4 つの壁であるかのように、4 つのページの中にいる 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">

これは機能しますが、4 ページから 1 ページへの移行には「長い道のり」が必要です。同様に、回転は、他の -90 度ではなく 270 度の回転として表示されます。これを解決するためにページ 1 の回転を -360 に変更すると、ページ 1 からページ 2 への遷移が壊れます。トランジションを一周するにはどうすればよいですか?

4

1 に答える 1

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 ?

于 2012-07-11T19:49:52.907 に答える