0

http://css3playground.com/flip-card.phptransform: rotateY()の例に基づいてCSS3 プロパティを使用して、Y 軸を中心に回転する単純な両面要素を実装しました。

ホバーまたは設定した間隔で回転させることはできますが、連続的に回転させようとしています。次のスクリプトがありますが、トランスフォームを「リセット」して、一方向にのみ回転するように見えるようにするのに問題があります。これまでのところ、前後に揺れるだけです。

setInterval(function() {
        $('.hover').removeClass('reverse').addClass('flip');
    setTimeout(function() {
        $('.hover').removeClass('flip').addClass('reverse')
    }, 1500);
}, 3000);

CSS は省略しますが、基本的にはそのサンプル ページにあるものと同じです。ただし、この.reverseクラスは の単なるクローンであり、同じ方向に最初に戻そうとする.flipの値があります。transform: rotateY()

4

1 に答える 1

1

キーフレーム アニメーションを使用する必要があります。このようなものでなければなりません。

        @-webkit-keyframes rotate-full {
            0% {
            -webkit-transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg);
          }

          50% {
            -webkit-transform: rotateY(180deg) rotateX(180deg) rotateZ(180deg);
          }

          100% {
            -webkit-transform: rotateY(360deg) rotateX(360deg) rotateZ(360deg);
          }
        }

しばらく前に行ったデモの例を次に示します。

http://codepen.io/jeffpowersd/pen/mCbhq

于 2013-08-25T03:23:55.177 に答える