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

perspectiveを使った奥行きのあるボックスの回転

Category:

対応ブラウザの少なさを言い訳に習得を後回しにしてきたcssのtransformですが、そろそろと思いお遊びで書いてみました。perspectiveとの組み合わせでボックスを回転させています。これはjsというよりもcssのノウハウといったほうが近いです。

まずはcss。

.box {
	width: 230px;
	height: 345px;
	perspective: 800px;
	-webkit-perspective: 800px;
	margin: 50px auto;
}
.box p {
	width: 230px;
	height: 145px;
	color: #fff;
	padding: 100px 0;
	font-size: 500%;
	text-align: center;
}
.box p.front {
	background: #c00;
}
.box p.back {
	display: none;
	background: #00c;
}

回転させるのはpタグです。pの外包する要素に、奥行きを表すperspectiveの値を指定しています。またpタグは裏表ひとつずつ別々に用意し、標準値では裏をdisplay: none;で非表示にしています。chromeの場合、perspectiveはベンダープレフィックスが必要でしたが、IE10とfirefoxでは不要でした。思っていたよりも対応範囲は広かったようです。

お次はjsです。

var	num = 0,
	turn = false;

var rotate_anm = function(){
	$('.box p').css({
		'transform' : 'rotateY(' + num * 2 + 'deg)'
	});
};

var rotate_anm_t = function(){
	$('.box p').css({
		'transform' : 'rotateY(' + num * -2 + 'deg)'
	});
};

var rotate_loop = function(){
	setTimeout(function(){
		if( turn === false ){
			rotate_anm();
		} else {
			rotate_anm_t();
		}
		if( num <= 45 && turn === false ){
			if( num == 45 ){
				turn = true;
				$('.box p.front').hide();
				$('.box p.back').show();
			}
			num += 1;
			rotate_loop();
		} else if( num >= -45 && turn === true ) {
			if( num == -45 ){
				turn = false;
				$('.box p.front').show();
				$('.box p.back').hide();
			} else {
				num -= 1;
			}
			rotate_loop();
		}

	}, 10);
};

rotate_loop();

setTimeoutを使用したループ処理で、cssのtransform値を0.01秒毎に切り替えています。またtransform:rotateY(90deg)になる段階で回転するボックスの向きが真横になるので、この段階で裏表を切り替えています。

動作のサンプルはこちら
回転 - js do it

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

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