web transform图片旋转_如何借助CSS3实现简单旋转风车效果？

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

屏幕录播转gif格式可能效果较差

---

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样式文件代码如下：

本例CSS样式代码

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

---

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