使用CSS制作简易3D效果旋转木马实例代码

时间：2020-11-27 来源：智榕旅游

最近看一下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>