/* CSS Document */


#cardlist li {
position: relative;
float: left;
margin: 0 20px 20px 0;
width: 150px;
height: 210px;
list-style: none;
cursor: pointer;
}

.rotate {	
	animation: rotate 6s ease 3s infinite running;
}

.rotate-front {	
	animation: rotatefront 4s ease 0s infinite alternate running;
}
.rotate-back {
	animation: rotateback 4s ease 0s infinite alternate running;
}

@keyframes rotate {
	0% {
	transform:rotateY(0deg);
	}
	80% {
	transform:rotateY(0deg);
	}
	
	100% {
	transform:rotateY(-360deg);
	}
}

@keyframes rotatefront {
	0% {
	transform:rotateY(0deg);
	}
	80% {
	transform:rotateY(0deg);
	}
	90% {
	transform:rotateY(-90deg);
	}
	100% {
	transform:rotateY(-90deg);
	}
}

@keyframes rotateback {
	0% {
	transform:rotateY(-90deg);
	}
	90% {
	transform:rotateY(-90deg);
	}
	100% {
	transform:rotateY(0deg);
	}
}


.omote {
position: absolute;
top: 0;
left: 0;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-webkit-transform:perspective(1000) rotateY(0deg);
-moz-transform:perspective(1000px) rotateY(0deg);
transform:perspective(1000px) rotateY(0deg);
-webkit-transition:ease-out 0.5s -webkit-transform;
-moz-transition:ease-out 0.5s -moz-transform;
transition:ease-out 0.5s transform;
}
.ura {
position: absolute;
top: 0;
left: 0;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-webkit-transform:perspective(1000) rotateY(90deg);
-moz-transform:perspective(1000px) rotateY(90deg);
transform:perspective(1000px) rotateY(90deg);
-webkit-transition:ease-out 0.5s -webkit-transform;
-moz-transition:ease-out 0.5s -moz-transform;
transition:ease-out 0.5s transform;
}