效果：http://runjs.cn/code/tph94zja
<!DOCTYPE>
<html>
<head>
<meta charset=utf-8" />
<title>CSS3 实现的3D动画效果</title>
<style type="text/css">
#animate_3d img{float:left;}
#animate_3d{
width:500px; overflow:hidden;
-webkit-perspective:600px; /* 光源设置为离页面200像素的位置 */
-webkit-transform-style:preserve-3d; /* 光源设置为离页面200像素的位置 */
-webkit-animation-name:x-spin;/*动画名称*/
-webkit-animation-duration:7s;/*动画持续时间*/
-webkit-animation-iteration-count:1;/*动画播放次数infinite 无限次*/
-webkit-animation-timing-function:linear;/*从开始到结束以什么样的速度播放动画*/
/*linear 动画从头到尾的速度是相同的。 */
/*ease 默认。动画以低速开始，然后加快，在结束前变慢。 */
/*ease-in 动画以低速开始。 */
/*ease-out 动画以低速结束。 */
/*ease-in-out 动画以低速开始和结束。 */
/*cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。(数值越小，速度越快)*/
}
img,#animate_3d>div{
-webkit-transform-style:preserve-3d;
-webkit-animation-iteration-count:1;
-webkit-animation-timing-function:linear;
}
#animate_line_1{
-webkit-animation-name:y-spin;
-webkit-animation-duration:5s;
}
#animate_line_2{
-webkit-animation-name:y-spin;
-webkit-animation-duration:4s;
}
#animate_line_3{
-webkit-animation-name:y-spin;
-webkit-animation-duration:3s;
}
/*关键帧*/
@-webkit-keyframes x-spin {
0% { -webkit-transform:rotateX(0deg); }
50% { -webkit-transform:rotateX(180deg); }
100% { -webkit-transform:rotateX(360deg); }
}
@-webkit-keyframes y-spin {
0% { -webkit-transform:rotateY(0deg); }
50% { -webkit-transform:rotateY(180deg); }
100% { -webkit-transform:rotateY(360deg); }
}
</style>
</head>
<body>
<div id="animate_3d">
<div id="animate_line_1">
<img src="image/3d/ps1.jpg" />
<img src="image/3d/ps2.jpg" />
<img src="image/3d/ps3.jpg" />
<img src="image/3d/ps4.jpg" />
<img src="image/3d/ps5.jpg" />
</div>
<div id="animate_line_2">
<img src="image/3d/ps6.jpg" />
<img src="image/3d/ps7.jpg" />
<img src="image/3d/ps8.jpg" />
<img src="image/3d/ps9.jpg" />
<img src="image/3d/ps10.jpg" />
</div>
<div id="animate_line_3">
<img src="image/3d/ps11.jpg" />
<img src="image/3d/ps12.jpg" />
<img src="image/3d/ps13.jpg" />
<img src="image/3d/ps14.jpg" />
<img src="image/3d/ps15.jpg" />
</div>
</div>
</body>
</html>
参照：http://www.zhangxinxu.com/wordpress/?p=565
