Muszę przyznać, to tylko pół odpowiedź; pokazuje, jak używać CSS/JQuery do animowania efektu toczenia.
<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>
Trzeba JQuery 1.5.1+ i transformjs library, które mogą być downloaded here. Kliknij każdy numer, aby go obrócić. Testowane w Firefox 11 i Chromium 17; transform.js powinien zrobić coś, co zadziała w starszych przeglądarkach i IE.
BTW, mówiąc o wyzwaniach związanych z różnymi przeglądarkami, początkowo miałem trzy numery na <span> s. Działa to w przeglądarce Firefox, ale Chrome ich nie ożywi! Stąd zmiana na <div> s z float:left.
Tak jak powiedziałem, jest to tylko pół rozwiązanie, ponieważ nie wygląda jeszcze jak karta typu flip. Myślę, że można to zrobić z odrobiną maskowania i tworzeniem tymczasowego div na szczycie liczby (rzeczywisty div będzie miał następną liczbę, poprzednia liczba będzie w tym tymczasowym div, na górze). Ale nie mogłem tego zrobić, zanim zabrakło mi czasu.
Nadal uważam, że warto było jednak opublikować; spróbuj dodać rotateY i rotateZ wraz z rotateX w animacji, aby uzyskać naprawdę efekt kewl.
możliwy duplikat [JavaScript Flip Counter] (http://stackoverflow.com/questions/746353/javascript-flip-counter) – Widor
Wypróbuj tę wtyczkę: http://www.littlewebthings.com/projects/countdown/example/ –
@Widor tak Znalazłem to, a także świetny przykład [tutaj] (http://cnanney.com/journal/demo/apple-counter-revisited/). jednak używają całego mnóstwa obrazów BG, chciałbym manipulować elementami HTML bezpośrednio i przekręcić/wykrzywić je za pomocą jQuery. Mógłbym użyć obrazów BG, jak przypuszczam - ale nie jestem świetny w Photoshopie, więc nie chcę używać tej metody. – Jake