【网页设计干货课】css3动画零基础到精通 03

来源：51rgb网站    作者：万晨曦

引言：本教程主要教学大家网页设计当中css3动画功能。将从零基础讲起，到后期结合jquery控制动画的触发等知识点。ps：如需下载万晨曦老师讲解之css3动画专辑视频请在公众号后台回复“css3动画”即可获得全套视频下载地址。

先来看看，咱们第三堂课要教给大家制作怎样一个css3动画效果：

这次课程相对于温习一遍第二堂课程的内容

稍作改动

把移动变大的动画改为旋转变大

大家可以试着自己写写看

用之前课程提到的旋转动画属性

如果写了出错的话

我们看下面的代码示范：

div的代码依然不变

还是那四个方块

代码如下：

跟第二堂课一样的代码就不再重复了

transform:rotate(45deg)

rotate：旋转

(45deg)：转45度

友情提示

css3动画功能还提供了三维旋转的效果

它的代码是：rotate3d()

如果一上来测试效果看不懂

可以分三个轴，一个个测试：

rotateX()

rotateY()

rotateZ()

分别代表三维空间的x，y，z三个轴

由于我们测试用的方块是单色填充，所以看上去效果不明显

甚至直观上的感受是压扁了

建议大家可以添加图片、文字等观看三维旋转的效果

看完本节课程是不是感觉到自己对css3动画已经很熟练了？

甚至如果老师提出一个动画要求自己也能独立书写完成了？

很好，你又向月薪2万+迈出了坚实的一步！

ps：如需下载万晨曦老师讲解之css3动画专辑视频请在公众号后台回复“css3动画”即可获得全套视频下载地址。

同理

回复“sohu网站”---零基础的童鞋学这个

回复“小米网站”---有基础的童鞋学这个

回复“jquery”---想拿2万薪水的童鞋学这个

每天学一点·小白快速进阶大神

推荐阅读：

【51rgb】零基础JavaScript视频教程合集