使用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>