Bu sadece yarım cevaptır kabul edeceğiz; yuvarlanma efektini canlandırmak için CSS/JQuery'nin nasıl kullanılacağını gösterir.
<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>
Bu JQuery 1.5.1+ ihtiyacı
ve
downloaded here olabilir
transformjs library. Döndürmek için her numaraya tıklayın. Firefox 11 ve Chromium 17'de test edildi; transform.js, eski tarayıcılarda ve IE'de çalışacak bir şey yapmalıdır.
BTW, çapraz tarayıcı zorlukların konuşma, ben aslen <span> s üç sayı vardı. Bu, Firefox'ta çalışır, ancak Chrome onları hareketlendirmez! Bu nedenle float:left ile <div> s için değişiklik. Oldukça henüz bir flip kartı gibi görünmüyor olarak Dediğim gibi
, o sadece yarım çözümdür. Sanırım bu biraz maskeleme ile yapılabiliyor ve numaranın üstünde geçici bir boşluk yaratabiliyor (gerçek div bir sonraki sayıya sahip olacak, bir önceki sayı bu geçici divda, üstte olacak). Ama zamanım tükenmeden çalışamadım.
Hala olsa gönderme değer diye düşündüm; Bazı gerçekten kewl efektleri için, animasyonda rotateX'in yanı sıra bir rotateY ve rotateZ eklemeyi deneyin.
[JavaScript Çevirme Sayacı] 'nın olası bir kopyası (http://stackoverflow.com/questions/746353/javascript-flip-counter) – Widor
Bu eklentiyi deneyin: http://www.littlewebthings.com/projects/countdown/example/ –
@Widor evet Bunu da buldum ve harika bir örnek [burada] (http://cnanney.com/journal/demo/apple-counter-revisited/). bununla birlikte, bütün bir BG imajı kullanıyorlar, HTML elemanlarını doğrudan manipüle etmek ve jQuery kullanarak onları çevirmek/çevirmek istiyorum. Herhalde BG imajlarını kullanabilirim - ama photoshop'ta pek iyi değilim, bu yüzden bu yöntemi kullanmak konusunda ihtiyatlıyım. – Jake