使用CSS制作简易3D效果旋转木马实例代码
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了使用CSS制作简易3D效果旋转木马实例代码，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2217字，纯文字阅读大概需要4分钟。
内容图文
最近看一下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="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效果旋转木马实例代码的详细内容，更多请关注Gxl网其它相关文章！
内容总结
以上是互联网集市为您收集整理的使用CSS制作简易3D效果旋转木马实例代码全部内容，希望文章能够帮你解决使用CSS制作简易3D效果旋转木马实例代码所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】