其实就是找到角度和位置，计算每根柱子的旋转角度摆放到3d空间的置顶位置即可。然后利用css的animate属性让3d舞台无线旋转，就有了一简易的旋转木马效果。感兴趣的可以看一下，可以把代码中的图片路径改为自己的图片地址就行了。直接可用。
代码如下：
<!doctype html><html><head lang="en"> <meta charset="utf-8"> <title></title> <style> .box{ width:800px; height: 600px; margin:0px auto; } .box .stage{ perspective:0px; perspective-origin: center center; } .box .stage .container{ transform-style: preserve-3d; } .box ul,.box li{ list-style: none; margin:0px; padding:0px; text-align: center; font-weight: bold; } .box ul{ margin-left:200px; width:400px; height:400px; } .box li{ position: absolute; margin-left:200px; width:10px; height:300px; background: blue; color:red; transform-origin: 5px top; } .box li> .horse{ width:100px; height:100px; position: absolute; top:298px; left:-55px; border-radius: 50px; background-image: url(horse.jpg); background-size: contain; } .box ul{ animation: run 20s linear infinite; } @-webkit-keyframes run { 0%{ transform: rotatey(0deg); } 100%{ transform: rotatey(360deg); } } @-webkit-keyframes horserun { 0%{ transform: translatey(0px); } 100%{ transform: translatey(50px); } } </style> <script src="js/jquery-1.11.2.js"></script> <script> $(function(){ var len=$(.container>li).length; $(.container>li).each(function(e){ var index=$(.container>li).index(this)+1; $(this).css({ transform:rotatey(+360/len * index+deg) skew(60deg) }); }); }) </script></head><body><p class="box"> <p class="stage"> <ul class="container"> <li class="horse1"> <p class="horse"></p> </li> <li style="background: orange"> <p class="horse"></p> </li> <li style="background: #ffff00"> <p class="horse"></p> </li> <li style="background: green"> <p class="horse"></p> </li> <li style="background: blue"> <p class="horse"></p> </li> <li style="background:lightskyblue "> <p class="horse"></p> </li> <li style="background: purple"> <p class="horse"></p> </li> <li style="background: black"> <p class="horse"></p> </li> </ul> </p></p></body></html>
以上就是使用css制作简易3d效果旋转木马实例代码的详细内容。