查看效果：http://hovertree.com/texiao/css/14/
本效果用css3的animation实现动画
定义和用法
animation 属性是一个简写属性，用于设置六个动画属性：
animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
注释：请始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了。
默认值： none 0 ease 0 1 normal
继承性： no
版本： CSS3
JavaScript 语法： object.style.animation="movehovertree 5s infinite"
语法
animation: name duration timing-function delay iteration-count direction;
animation-name 规定需要绑定到选择器的 keyframe 名称。。
animation-duration 规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function 规定动画的速度曲线。
animation-delay 规定在动画开始之前的延迟。
animation-iteration-count 规定动画应该播放的次数。
animation-direction 规定是否应该轮流反向播放动画。
示例：http://hovertree.com/texiao/css/14/1.htm
图片旋转代码如下：
<!doctype html> <html> <head> <meta charset="utf-8" /> <title>CSS3女神来袭 - 何问起</title> <style> body { margin: 0; background: #000; } #wrap { width: 300px; height: 400px; position: relative; margin: 100px auto; -webkit-perspective: 3000px; -moz-perspective: 3000px; -ms-transform: perspective(3000px); -ms-perspective: 3000px; } #head { width: 100%; height: 100%; position: absolute; -webkit-transform-style: preserve-3d; -webkit-animation: donghua 15s linear 0s infinite; -moz-transform-style: preserve-3d; -moz-animation: donghua 15s linear 0s infinite; -ms-transform-style: preserve-3d; -ms-animation: donghua 25s linear 0s infinite; } #head div { position: absolute; top: 0; left: 0; width: 300px; height: 400px; border: 1px solid red; text-align: center; line-height: 100px; } #head div:nth-child(1) { -webkit-transform: rotateY(0deg) translateZ(400px); -moz-transform: rotateY(0deg) translateZ(400px); -ms-transform: rotateY(0deg) translateZ(400px); background: url(http://hovertree.com/texiao/css/14/hovertreepic/01.jpg); background-size: cover; } #head div:nth-child(2) { -webkit-transform: rotateY(36deg) translateZ(500px); -moz-transform: rotateY(36deg) translateZ(500px); -ms-transform: rotateY(36deg) translateZ(500px); background: url(http://hovertree.com/texiao/css/14/hovertreepic/02.jpg); background-size: cover; } #head div:nth-child(3) { -webkit-transform: rotateY(72deg) translateZ(400px); -moz-transform: rotateY(72deg) translateZ(400px); -ms-transform: rotateY(72deg) translateZ(400px); background: url(http://cms.hovertree.com/hvtimg/201511/9rour12a.jpg); background-size: cover; } #head div:nth-child(4) { -webkit-transform: rotateY(108deg) translateZ(500px); -moz-transform: rotateY(108deg) translateZ(500px); -ms-transform: rotateY(108deg) translateZ(500px); background: url(http://hovertree.com/texiao/css/14/hovertreepic/04.jpg); background-size: cover; } #head div:nth-child(5) { -webkit-transform: rotateY(144deg) translateZ(400px); -moz-transform: rotateY(144deg) translateZ(400px); -ms-transform: rotateY(144deg) translateZ(400px); background: url(http://hovertree.com/texiao/css/14/hovertreepic/05.jpg); background-size: cover; } #head div:nth-child(6) { -webkit-transform: rotateY(180deg) translateZ(500px); -moz-transform: rotateY(180deg) translateZ(500px); -ms-transform: rotateY(180deg) translateZ(500px); background: url(http://hovertree.com/texiao/css/14/hovertreepic/06.jpg); background-size: cover; } #head div:nth-child(7) { -webkit-transform: rotateY(216deg) translateZ(400px); -moz-transform: rotateY(216deg) translateZ(400px); -ms-transform: rotateY(216deg) translateZ(400px); background: url(http://hovertree.com/texiao/css/14/hovertreepic/07.jpg); background-size: cover; } #head div:nth-child(8) { -webkit-transform: rotateY(252deg) translateZ(500px); -moz-transform: rotateY(252deg) translateZ(500px); -ms-transform: rotateY(252deg) translateZ(500px); background: url(http://hovertree.com/texiao/css/14/hovertreepic/08.jpg); background-size: cover; } #head div:nth-child(9) { -webkit-transform: rotateY(288deg) translateZ(400px); -moz-transform: rotateY(288deg) translateZ(400px); -ms-transform: rotateY(288deg) translateZ(400px); background: url(http://hovertree.com/hvtimg/201511/6j9j6tk5.png); background-size: cover; } #head div:nth-child(10) { -webkit-transform: rotateY(324deg) translateZ(500px); -moz-transform: rotateY(324deg) translateZ(500px); -ms-transform: rotateY(324deg) translateZ(500px); background: url(http://cms.hovertree.com/hvtimg/201512/wfevf6yh.jpg); background-size: cover; } @-webkit-keyframes donghua { 0% { transform: rotateX(5deg) rotateY(360deg); } 50% { transform: rotateX(-5deg) rotateY(180deg); } 100% { transform: rotateX(5deg) rotateY(0deg); } } @-moz-keyframes donghua { 0% { transform: rotateY(10deg) rotateY(0deg); } 50% { transform: rotateY(-10deg) rotateY(180deg); } 100% { transform: rotateY(10deg) rotateY(360deg); } } @-ms-keyframes donghua { 0% { transform: rotateY(10deg) rotateY(0deg); } 50% { transform: rotateY(-10deg) rotateY(180deg); } 100% { transform: rotateY(10deg) rotateY(360deg); } }a{color:white} </style> </head> <body> <div id="wrap"> <div id="head"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </div><div style="margin:0px auto;text-align:center;width:736px"> <h2>图片立体旋转</h2><a href="http://hovertree.com/">首页</a> <a href="http://hovertree.com/texiao/">特效</a> <a href="http://hovertree.com/h/bjaf/a6598spx.htm">原文</a> <a href="http://hovertree.com/texiao/css/14/1.htm">Demo 2</a></div> </body> </html>
