html中图片旋转木马,教你怎么用CSS3做一个图片的旋转木马效果

CSS3的功能很强大，不但可以添加很多的样式，也可以绘制自定义的动画效果。要做一个图片的旋转木马效果，我们需要用到CSS3的3d转换。对于3d转换具体的内容，虽然这块内容并不是那么容易让人理解，不过这里也就不做介绍了，可以在菜鸟教程或者W3C里好好看看，然后自己多动手试试，一点点的去领会(本菜也是研究了好几个小时才稍稍理解那些属性的具体意思)。

学习网站

不多说，现在进入正题。

先看一个我自己做的简单的旋转木马效果

旋转木马demo

例子

这个例子是我随手写的，非常简单，不过只要你掌握了实现原理，你就可以随行所欲的做出自己想要的华丽的效果。

首先我们要做这个旋转木马效果之前，我们要想想需要实现哪些3d的转换。刚做的时候其实想到的就只有rotateY属性。然后还得想想怎么实现，如果给每个图片都添加一个动画效果是不是太麻烦了。所以我们可以创造一个容器，在容器里放好这些图片，然后对容器进行旋转，这样，我们只需要对容器加一个动画效果就行。

那我们先来试试这样做，我们先创建一个容器，创建四个div，这几个div用绝对定位，让他们共用中心点。

1

2

3

4

这四个div只需要添加不同的rotateY()属性，使其围成一个圈。所以每个div之间相距应该是90deg。在容器里必须加一个属性transform-style: preserve-3d;让他的子元素也是实现3d效果。

查看效果，一看这是什么东西。在这里我们发现了一个问题，因为这几个div因为位置是一样的，所以在rotateY()旋转的时候，都叠在了一起。

所以我们得想个办法，让这几个div分开来，并沿着中心点进行旋转。

好好想想，看看能不能找到解决办法！

还记得我们在学习3d转换的时候，了解过perspective和translateZ()方法(刚学的时候，这两个内容不太好理解，需要自己好好的研究一下)。perspective是舞台视距，translateZ()会跟着舞台视距进行移动。我们可以通过这两个属性来把这几个div分离开来。首先我们在容器外面再加一个舞台。

1

2

3

4

给舞台加一个perspective: 800px;属性(这个属性的大小可以自己定义)。然后再每个div里加上translateZ()属性，可以自己慢慢试，设置好一个合适的值。如果方向什么有偏差，可以通过perspective-origin:进行微调。调整好了之后，用关键帧动画实现给容器加个旋转的效果，就大功告成了。只要你理解了perspective和translateZ()方法，对你来说肯定很简单。

对于源码的话，小伙伴们可以查看上面那个demo网页的审查元素来查看。

你现在就可以用上你自己喜欢的图片来做一个华丽的的旋转木马效果了！