0

立方体、より具体的にはこのtutからの立方体を回転させようとしています：http ：//desandro.github.com/3dtransforms/examples/cube-02-show-sides.html サイド1からサイド3に移動したいとします。さて、私が達成したいのは、立方体を回転させるだけでなく、x軸上でそれを平行移動（移動）することです。たとえば、回転が終了すると、立方体は右に20ピクセル移動し（回転の半分まで）、左に20ピクセル移動します（元の位置に戻ります）。私は次のことを試しましたが、何か問題があると思います（ここではcssプレフィックスを省略しています）：

#cube.show-right {
    transform: translateX(20px) translateZ( -100px ) rotateY(  -90deg ) translateX(-20px)
}

これを実行する方法はありますか？ありがとう！

4

1 に答える 1

1

あなたの例では、x-translations が互いに打ち消し合っていると思います (キューブに右 20px と左 20px に移動するように指示しています)。

目的を達成するために (回転の前半は右にスライドし、後半は左にスライドします)、キューブを 2 つの変換アニメーションを含むラッパー div 内に配置し、2 つ目のアニメーションは遅延します (詳しくはこちらを参照)。移行を遅らせる方法の説明)。これらの 2 つのアニメーションは、両方とも立方体の回転の半分の長さにする必要があります。

お役に立てれば！

于 2013-01-08T21:02:02.660 に答える