我来水贴（博客）了

来小亮，给大伙整个活！

来咯，旋转木马！

😅差不多得了

接下来教大家如何制作旋转木马（流汗黄豆）

先贴代码

css部分

section{perspective: 1000px;position: relative;width: 23px;height: 23px;margin: 100px auto;transform-style: preserve-3d;animation: rotate 3s linear infinite;
}
section div{width: 100%;height: 100%;position:absolute;top:0px;left:0px;background: url(snow.png) no-repeat;
}
section div:nth-child(1){transform: translateZ(30px);
}
section div:nth-child(2){transform:  rotateY(60deg) translateZ(50px);
}
section div:nth-child(3){transform:  rotateY(120deg) translateZ(50px);
}
section div:nth-child(4){transform:  rotateY(180deg) translateZ(50px);
}
section div:nth-child(5){transform:  rotateY(240deg) translateZ(50px);
}
section div:nth-child(6){transform:  rotateY(300deg) translateZ(50px);
}
@keyframes rotate{0%{transform: rotateY(0);}100%{transform: rotateY(360deg);}
}

html部分

<section><div></div><div></div><div></div><div></div><div></div><div></div>
</section>

这旋转木马是十分的简单。

 perspective是增加一个透视效果大小自定

section的大小由图片决定

transform-style:preserve-3d;是增加透视3d效果

animation:rotate(旋转动画) 3s(动画完成时间) linear(匀速进行动画) infinite(无限循环);

 这一部分是对六个不同的角度进行加工 旋转，增加视图。

先选装，再移动。

旋转动画 

再看一次效果图