JSFiddle - React, Tailwind, and code Playground

by iwbjp

HTML

<img src="http://iwb.jp/wp-content/uploads/2013/09/tokyo20201.png" alt="" width="150" height="195">

CSS

@-webkit-keyframes r {
	0% {
		-webkit-transform: rotateX(0);
	}
	100% {
		-webkit-transform: rotateX(720deg);
	}
}
@-moz-keyframes r {
	0% {
		-moz-transform: rotateX(0);
	}
	100% {
		-moz-transform: rotateX(720deg);
	}
}
@keyframes r {
	0% {
		transform: rotateX(0);
	}
	100% {
		transform: rotateX(720deg);
	}
}
.rotateX {
	-o-animation: r 1s 0s 1;
	-ms-animation: r 1s 0s 1;
	-moz-animation: r 1s 0s 1;
	-webkit-animation: r 1s 0s 1;
}

JavaScript

//2秒後にclass="rotateX"を画像に付ける
setTimeout(function(){
	$("img").addClass("rotateX");
}, 2000);