如何利用CSS制作简易旋转木马效果

最近回顾动画知识的时候，看到了3d相关的知识，想到了当时学CSS 3动画的时候做的一个旋转木马还挺好看的，今天就来说说怎么用CSS3的变形（transform）和动画（animation）的相关知识做一个简单的3d版的旋转木马效果。

准备工作

首先，想做这个动画，我们要先了解用到的相关属性。

变形

transform:通过这个属性，我们可以对元素进行位移、旋转、缩放、倾斜等操作，其中最常用的就是位移和旋转，缩放和倾斜按需求使用。transform同时支持2d和3d的变形，而本次我们需要的自然就是3d方面的操作了。
说完transform后说说它的子属性：
鉴于本次操作只用到了位移和旋转，所以主要说说这两个属性，其他属性朋友们有兴趣的话可以自己去搜索一下。

• translate: 通过该属性，可以将元素从当前位置在x,y,z轴位移规定的距离。
  2d复合写法： translate(x,y)，表示元素在x轴和y轴位移的距离
  3d复合写法：translate(x,y,z)，表示元素在x轴和y轴和z轴位移的距离
  当然，我们也可以单独拆分来写某个轴位移的距离：translateX(),translateY(),translateZ(),就分别表示了在各轴方向上位移的距离。

  注：translate后面的X、Y、Z注意大写，距离可以是负值，表示方向。

• rotate: 通过该属性，可以将元素从当前位置围绕x,y,z轴旋转规定的角度。这里要注意一下：

  注：2d平面的rotate只有一种写法就是rotate()，而3d上的rotate是有复合写法的

  3d复合写法：

rotate3d() : 四个值 0|1(x轴是否添加旋转角度)  0|1(y轴是否添加旋转角度)  0|1(z轴是否添加旋转角度)  deg

例如：rotate3d(1,1,1,30deg);表示围绕x,y,z各顺时针旋转30度。
而如果我们不想用这种方法，也可以单独拆分来写绕某个轴旋转的角度：rotateX(),rotateY(),rotateZ()

这里同样要注意X、Y、Z的大写,角度可以是负值，表示逆时针旋转。rotateZ()与2d平面中的rotate()效果是相同的。

角度也可以是弧度，但是我们并不常用，而且这里也用不到，所以有兴趣的朋友可以自己搜索一下。
transform-origin: 该元素可以让我们改变元素变形属性的基点，默认位置在元素中心。
transform-style: 定义3d空间，浏览器中的元素默认是在2d平面显示的，我们可以通过改变父元素的transform-style属性值来构造3d的空间.
perspective(景深): 通过景深属性，我们定义距离3d元素多远去观察元素，值越大幅度越小。
perspective-origin:` 该属性可以让我们改变景深的基点，也就是观察3d元素的角度。默认值在元素中心。我们可以通过改变基点在x,y轴的位置来改变观察角度，具体操作待会儿在实践中演示。

动画

animation: 通过该属性我们可以给元素定义动画。animation是以下属性的简写：

• animation-name: 规定动画名称。
• animation-duration: 规定动画持续时间。
• animation-timing-function: 规定动画运动曲线。
• animation-delay: 规定动画开始前的延迟时间。
• animation-iteration-count: 规定动画播放次数。
• animation-direction: 规定动画运动方向。

具体值就不详细介绍了，我第一个博客介绍的挺详细的，或者不懂的朋友也可以上网搜索一下，这里需要注意的就是如果简写属性里写了两个时间，那么第一个是animation-duration的值，第二个是animation-delay的值。

@keyframes规则: 通过该规则规定动画的过程，通过关键词from,to或者百分比设置动画变化的过程。
那么，一切已经准备就绪了，就让我们开始吧：

开始操作

首先，我们可以准备8张图片来做旋转木马的效果，这样我们可以写一个列表，然后给ul构造3d空间即可，为了方便观察，我们在外围在套一个盒子，用于设置景深：

<div id="box">
        <ul class="ff">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>