最近看一下css3d的一些特性，想着也实验学习一下，制作个小demo之类的。就练习了一下。开发一个粗糙的选择木马效果，如图
其实就是找到角度和位置，计算每根柱子的旋转角度摆放到3d空间的置顶位置即可。然后利用css的animate练习让3d舞台无线旋转，就有了一简易的旋转木马效果。感兴趣的可以看一下，可以把代码中的练习路径改为自己的图片地址就行了。直接可用。
代码如下：
.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); } } $(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)" }); }); })
登录后复制
立即学习“前端免费学习笔记（深入）”；
以上就是使用CSS制作简易3D效果旋转木马实例代码的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2905282.html
