jstarted.com
JavaScript/HTML/CSSのノウハウや覚書を掲載するブログ
2013.10.10

クリックしてカードをめくる

Category:

以前書いた「perspectiveを使った奥行きのあるボックスの回転」を応用して、今回はクリックするとカード(ボックス)が回転してめくれる、というコードを書いてみました。

(function($){
	$.fn.rotate_box = function(){
		var	elm = $(this),
			elm_in = $('.inner', this),
			btn = $('.face, .back', elm),
			deg = 0,
			turn = false,
			turn_cls = 'reverse';

		var rotate_anm = function(){
			elm_in.css({
				'transform' : 'rotateY(' + deg * -2 + 'deg)'
			});
		};

		var rotate = function(){
			setTimeout(function(){
				rotate_anm();
				if( deg == 45 ){
					if( turn === false ){
						elm.addClass(turn_cls);
					} else {
						elm.removeClass(turn_cls);
					}
					deg = 315;
				}
				if( deg <= 45 ){
					deg += 3;
					rotate();
				} else if( deg < 360 && deg > 45 ) {
					deg += 3;
					rotate();
				} else {
					deg = 0;
					elm_in.attr('style', '');
					if( turn === false ){
						turn = true;
					} else {
						turn = false;
					}
				}
			}, 5);
		};

		btn.click(function(){
			rotate();
		});
	};
})(jQuery);

$('.card').each(function(){
	$(this).rotate_box();
});

あまり意味はないですが、ボックスを回転させる命令をメソッド化するかたちで書いてみました。回転のさせかた自体は以前と同様なので、htmlとcssは省きます。

動作のサンプルはこちら
クリックしてカードをめくる - js do it

今はクリックイベントはボックスの回転しか命令を書いていませんが、他の命令と組み合わせることで簡単なゲームくらいには応用できそうです。神経衰弱とか、タロットのスプレッドとか。

jstarted.comはamazon.co.jpを宣伝しリンクすることによってサイトが紹介料を
獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、
Amazonアソシエイト・プログラムの参加者です。

クリエイティブ・コモンズ・ライセンス
jstarted.com by yoichi kobayashi is licensed under a Creative Commons 表示 3.0 非移植 License.