最近看一下css3d的一些特性，想着也实验学习一下，制作个小demo之类的。就练习了一下。开发一个粗糙的选择木马效果，如图其实就是找到角度和位置，计算每根柱子的旋转角度摆放到3d空间的置顶位置即可。然后利用css的animate属性让3d舞台无线旋转，就有了一简易的旋转木马效果。 ...
最近看一下css3d的一些特性，想着也实验学习一下，制作个小demo之类的。就练习了一下。开发一个粗糙的选择木马效果，如图
其实就是找到角度和位置，计算每根柱子的旋转角度摆放到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='/images/loading.gif' data-original="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><div class="box"> <div class="stage"> <ul class="container"> <li class="horse1"> <div class="horse"></div> </li> <li style="background: orange"> <div class="horse"></div> </li> <li style="background: #ffff00"> <div class="horse"></div> </li> <li style="background: green"> <div class="horse"></div> </li> <li style="background: blue"> <div class="horse"></div> </li> <li style="background:lightskyblue "> <div class="horse"></div> </li> <li style="background: purple"> <div class="horse"></div> </li> <li style="background: black"> <div class="horse"></div> </li> </ul> </div></div></body></html>
海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com
原标题：利用CSS3D效果制作简易旋转木马效果
关键词：CSS
*特别声明：以上内容来自于网络收集，著作权属原作者所有，如有侵权，请联系我们：
admin#shaoqun.com
（#换成@）。
