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()