CSS图片旋转效果

* {
	padding:0;
	margin:0;
}
body {
	background:#000;
}
.box1 {
	position:relative;
	width:100%;
	margin:0 auto;
}
h1 {
	text-align:center;
	color:#fff;
}
.zhu {
	width:200px;
	position:absolute;
	top:50px;
	left:700px;
}
.zhu a {
	font-size:40px;
	color:#fff;
	text-decoration:none;
	letter-spacing:15px;
}
.box2 {
	width:200px;
	height:300px;
	position:relative;
	margin:200px auto;
	transform-style:preserve-3d;
	animation:fn 10s;
	animation-iteration-count:infinite;
	animation-timing-function:linear;
}
img {
	width:300px;
	height:400px;
}
.box2 div {
	width:200px;
	height:300px;
	position:absolute;
	left:0;
	top:0;
}
.box2:hover {
	animation-play-state:paused;
}
.img1 {
	transform:rotateY(0deg) translateZ(485px);
}
.img2 {
	transform:rotateY(40deg) translateZ(485px);
}
.img3 {
	transform:rotateY(80deg) translateZ(485px);
}
.img4 {
	transform:rotateY(120deg) translateZ(485px);
}
.img5 {
	transform:rotateY(160deg) translateZ(485px);
}
.img6 {
	transform:rotateY(200deg) translateZ(485px);
}
.img7 {
	transform:rotateY(240deg) translateZ(485px);
}
.img8 {
	transform:rotateY(280deg) translateZ(485px);
}
.img9 {
	transform:rotateY(320deg) translateZ(485px);
}
@keyframes fn {
	0% {
	transform:rotateX(-15deg) rotateY(0deg);
}
100% {
	transform:rotateX(-15deg) rotateY(360deg);
}
}