统Web设计开发过程中，动画效果主要借助flash动画制作工具实现动画的制作。随着JS技术尤其是JQuery技术的出现，Web开发人员可以借助JS或者JQuery技术实现各类Web动画的开发。除此之外在HTML5+CSS3技术下可直接借助CSS3技术实现简单动画的制作。本文以风车旋转效果实现为例，对CSS3动画制作进行简单分析与说明。首先给出最终实现效果，如下图所示：

CSS3编写旋转风车效果如上图所示，本例子主要涉及CSS3属性包括CSS3动画属性与CSS3 2D转换属性。其中2D属性转换主要用于实现对图片进行旋转操作，动画属性主要用于实现动画控制功能。所需属性分别描述如下：

1、CSS3 2D 转换

通过 CSS3 transform属性，我们能够对元素进行移动、缩放、转动、拉长或拉伸。我们例子中主要使用到元素的旋转方法rotate()，通过 rotate() 方法，元素顺时针旋转给定的角度。rotate方法参数为旋转度数，一般用deg表示，如30°为30deg。

2、CSS3 动画

动画主要是指指定元素从一个状态转移到另一个状态，CSS提供@keyframes 规则用于实现对状态的定义，通过@keyframes关键帧设置，最终可以实现动画效果。规则编写好之后需要使用animation属性，将动画规则绑定到对应元素上。animation主要属性值包括规则名称、执行时间及执行次数。写法如下：

animation:mymove 5s infinite;//mymove为规则名称 infinite表示重复执行
@keyframes mymove{...}//规则编写

明确旋转风车所需CSS3属性之后可以选择风车素材进行Web页面设计，本例风车素材主要包括叶片部分与手柄部分。素材如下图：

使用以上素材结合HTML5页面编码技术及DIV布局技术等，可以完成页面的设计与开发，本例#nam为叶片样式，hanlde为手柄样式，均使用层布局，设置div背景为素材图片。使用animation keyframes等进行动画设计。本例核心CSS样式文件代码如下：

以上通过简单例子给出了纯CSS3实现动画效果核心属性，归纳核心属性主要包括animation与transform两属性。如需完整页面代码或有问题讨论，请关注后私信作者。

本头条号长期关注于青少年编程资讯分享；编程课程、素材、代码分享及青少年编程培训。如果您对以上方面有兴趣，可关注该头条号，如有编程学习问题可以联系作者，共同探讨。

果您需要反转数组元素的顺序，可以使用数组方法reverse()⏪，如下所示：

修改原始数组

需要注意的一点是它会改变原始数组。

如何在不改变原始数组的情况下反转数组

以下是一些不会改变原始数组的做法。我们来看看

1. 使用 slice 和 reverse

2. 使用 ...扩展运算符 和 reverse

3. 使用 reduce 和 ...扩展运算符

4. 使用 reduceRight 和 ...扩展运算符

5. 或者使用push

相关文章：

使用Array.isArray更好地检查数组

JS扩展运算符(Spread Operator)的5种用法

如何使用ES6语法给数组去重

参考资源：

• MDN Web Docs: reverse
• w3schools: reverse
• Stack Overflow: Reverse array in Javascript without mutating original array

迎来到我的CSS3专题系列文章，更多精彩内容持续更新中，欢迎关注 ：)

CSS3 3D在大多的项目中应用还是挺广泛的，今天我将继续为大家分享一个新的3D交互效果。

本章目标

1. css3 3D实战
2. css3倒影
3. css3 关键帧动画

先来看我们今天要实现的效果吧！看似好复杂，1招教你搞定它，没错，就是通过关键帧动画来搞，我们一步步的来分析看

css3 3D实战

老规矩，先布局，这个就比较简单了。一个容器里面放N个div，依次绝对定位，使其所有的图片叠在一起！

然后让它们的父级设置为3D空间，并设置景深。

值得注意的是，不要忘了设置旋转基点为底部。

绝对定位后，我们还要设置每一张图片的层级，倒序

css3倒影

从gif图中可以看出来。每张图片都会有一个倒影的效果。在CSS3中我们是采用的box-reflect来实现倒影效果

box-reflect：none | <direction> <offset>? <mask-box-image>

第一个参数为：我们要设置的倒影的方向，它的取值有：

• above:表示生成的倒影在对象（原图）的上方；
• below:表示生成的倒影在对象（原图）的下方；
• left:表示生成的倒影在对象(原图)的左侧；
• right:表示生成的倒影在对象(原图)的右侧；

第二个参数offset是用来设置生成倒影与对象（原图）之间的间距，其取值可以是固定的像素值，也可以是百分比值

第三个参数是用来设置倒影的遮罩效果，可以是背景图片，也可以是渐变生成的背景图像

来看一个示例：

注意：box-reflect属性并不是一个标准的css3属性，所以我们需要加上webkit内核前缀。不加的话，效果出不来。

css3 关键帧动画

图中的动画效果我是采用的CSS3的帧动画来完成的，我们先来看看帧动画的语法。

要想使用帧动画，首先我们得先定义一个动画帧，我们通过@keyframes关键字来定义它

语法：

@kyeframes 动画名称{
 0%{
 ...
 }
 10%{
 }
 100%{
 //..
 }
}

我们在动画帧函数里面可以精准的定义动画的每一帧的变化情况。我们可以使用百分比的形式，也可以使用关键字，from to

定义完成后，我们可以在元素身上设置动画相关的属性

animation:动画名称 动画时间 延迟时间 动画运动形式 ...

我们先来实现一个简单的demo看看

运动一次，运动完成后，又回到了第一帧，一般来说，我们希望它停留在动画的最后一帧。我们一般在animation上再加一个forwards即可。

终极效果分析

当我们点击下一张的时候，当前的图片向前翻转消失，下一张出现，所以我们需要定义两个帧动画效果。

当下一张图片出现后，图片本身一个轻微的振动效果，这里我们也是通过多定义几个动画帧来实现的具体的代码如下：

最后我们来实现点击的逻辑。当我们点击下一张的时候，我们需要将当前的一张的动画设置成hide,下一张图片设置成show

这里我使用的是iNow变量来表示当前是第几张图片。

效果完成。

总结：

1. css3的可以实现倒影的效果，但是记得要加上-webkit-前缀
2. 帧动画的基础语法。
3. css3帧动画可以实现比transition更为复杂的动画效果,如此这个示例拿transition来做，可能就比较麻烦了。

这里是【畅哥聊技术】CSS3专题的系列文章，更多精彩内容持续更新中……

未完待续。。。