css transformをjQueryでスタートする

css transformをjQueryからスタートさせてみました。

今回は横軸回転を1回行うtransformをcssで設定します。
キーフレームの名前はrotateで、各ブラウザごとにベンダーフレックスを記述します。

@-webkit-keyframes rotate {
	0% {
		-webkit-transform:rotateY(0deg);
		transform:rotateY(0deg);
	}
	25% {
		-webkit-transform:rotateY(90deg);
		transform:rotateY(90deg);
	}
	50% {
		-webkit-transform:rotateY(180deg);
		transform:rotateY(180deg);
	}
	75% {
		-webkit-transform:rotateY(270deg);
		transform:rotateY(270deg);
	}
	100% {
		-webkit-transform:rotateY(360deg);
		transform:rotateY(360deg);
	}
}

@-moz-keyframes rotate {
	0% {
		-moz-transform:rotateY(0deg);
		transform:rotateY(0deg);
	}
	25% {
		-moz-transform:rotateY(90deg);
		transform:rotateY(90deg);
	}
	50% {
		-moz-transform:rotateY(180deg);
		transform:rotateY(180deg);
	}
	75% {
		-moz-transform:rotateY(270deg);
		transform:rotateY(270deg);
	}
	100% {
		-moz-transform:rotateY(360deg);
		transform:rotateY(360deg);
	}
}

@keyframes rotate {
	0% {
		-webkit-transform:rotateY(0deg);
		-moz-transform:rotateY(0deg);
		-ms-transform:rotateY(0deg);
		-o-transform:rotateY(0deg);
		transform:rotateY(0deg);
	}
	25% {
		-webkit-transform:rotateY(90deg);
		-moz-transform:rotateY(90deg);
		-ms-transform:rotateY(90deg);
		-o-transform:rotateY(90deg);
		transform:rotateY(90deg);
	}
	50% {
		-webkit-transform:rotateY(180deg);
		-moz-transform:rotateY(180deg);
		-ms-transform:rotateY(180deg);
		-o-transform:rotateY(180deg);
		transform:rotateY(180deg);
	}
	75% {
		-webkit-transform:rotateY(270deg);
		-moz-transform:rotateY(270deg);
		-ms-transform:rotateY(270deg);
		-o-transform:rotateY(270deg);
		transform:rotateY(270deg);
	}
	100% {
		-webkit-transform:rotateY(360deg);
		-moz-transform:rotateY(360deg);
		-ms-transform:rotateY(360deg);
		-o-transform:rotateY(360deg);
		transform:rotateY(360deg);
	}
}

それではjQueryから設定したrotateを追加して動かします。
例ではボタンを押したら回転するサンプルです。

$('#btn').on('click', function() {
	$('#selector').css({'animation': 'rotate 1s linear 0s 1'});
});

css transformはJavascriptより高速なので、jQueryで制御できる楽です。