html3d旋转木马怎么做,使用CSS制作简易3D效果旋转木马实例代码

最近看一下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)" });

});

})