效果：http://runjs.cn/code/hv2wmw1v
<!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
原文：http://www.cnblogs.com/mina-huojian66/p/6293703.html