私は、これは半分しか答えである認めますよ。 CSS/JQueryを使用してローリング効果をアニメーション化する方法を示します。
<html>
<head>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="transformjs.1.0.beta.2.min.js"></script>
<style>
body {font-size:128px;}
</style>
<script>
$(function(){ //OnInit
$('.anim').click(function() {
$(this).animate({ rotateX: '-='+(Math.PI/2), },500,"",
function(){ //OnComplete
var n=(parseInt($(this).html())+1)%10; //Turn 7 into 8, etc.
$(this).html(n.toString()); //Update number while it is hidden
$(this).animate({ rotateX: '+='+(Math.PI/2) },500); //Rotate it back
}
);
});
});
</script>
</head>
<body>
<div class="anim" style="float:left">1</div><div class="anim" style="float:left">2</div><div class="anim" style="float:left">3</div>
</body>
</html>
それはdownloaded hereことができるjQueryの1.5.1+、およびtransformjs libraryを、必要とします。 各番号をクリックするとスピンします。 Firefox 11とChromium 17でテスト済み。 transform.jsは、古いブラウザやIEで動作するものを実行する必要があります。
ところで、ブラウザ間のチャレンジに関しては、私はもともと<span>に3つの数字を持っていました。これはFirefoxで動作しますが、Chromeは動画をアニメーション化しません。したがって、への変更はfloat:leftとなります。
私が言ったように、それはまったくフリップカードのようには見えないので、半分の解決策に過ぎません。私はこれが少しのマスキングで行われ、数字の上に一時的なdivを作ることができると思います（実際のdivは次の数字を持ちます;前の数字は上の一時divにあります）。しかし、私は時間がなくなる前にそれを得ることができませんでした。
私はまだ投稿する価値があると思った。 rotateYとrotateZをアニメーションのrotateXと一緒に追加して、実際にいくつかの効果を試してみてください。
[JavaScript Flip Counter]の複製が可能です（http://stackoverflow.com/questions/746353/javascript-flip-counter） – Widor
このプラグインを試す：http://www.littlewebthings.com/projects/countdown/example/ –
@Widorはい私はそれを見つけました、また、ここでは素晴らしい例です[http://cnanney.com/journal/demo/apple-counter-revisited/]。しかし、彼らはBG画像全体を使用しています。私はHTML要素を直接操作し、jQueryを使用してそれらをひねり/歪ませたいと思います。私が想定しているBGイメージを使用することができます - しかし、私はフォトショップではあまり良くありませんので、私はその方法を使用することには慎重です。 – Jake