* {
	margin:0;
	padding:0;
}
ul,li,ol {
	list-style:none;
}
body {
	perspective:1000px;
}
.pre img {
	width:200px;
	height:150px;
	position:absolute;
	transition:all 1s ease;
}
.pre div {
	width:200px;
	height:150px;
	margin:10px;
	cursor:pointer;
	position:relative;
	transform:rotateX(-20deg) rotateY(20deg);
	transform-style:preserve-3d;
	margin:300px auto 0;
}
.pre .box1 {
	animation-name:hd;
	animation-duration:5s;
	animation-iteration-count:infinite;
	animation-timing-function:linear;
}
@keyframes hd {
	25% {
	transform:rotateY(90deg) rotateX(-30deg);
}
50% {
	transform:rotateY(180deg) rotateX(0deg);
}
75% {
	transform:translateY(200px) rotateX(90deg);
}
}.box1 img:hover {
	box-shadow:0 0 20px rgba(81,203,238,1);
}