HTML5入门教程之CSS3 2D炫酷动效

CSS3 2D炫酷动效是CSS3里面新增的属性，在了解它之前先看下CSS3的有关知识。

CSS3是一种样式语言，是用来告诉浏览器如何渲染页面的，是CSS推出的最新版本。

在CSS2.1上增加了很多强大的新功能，用来帮助开发人员解决一些问题，并且不再需要非语义化标签，复杂的js脚本和图片，例如圆角、多背景、透明度、阴影等等。我们知道CSS2.1是单一的规范，而CSS3被划分成几个模块组，每个模块组都有自己的规范。这样的好处就是整个CSS3的规范发布不会因为部分暂时无法实现的功能，而影响其他模块的推进和发展。比如说盖房子，HTML标签就是钢筋水泥是整体架构，房子盖好了人要住进去，这个时候就需要装修，怎么装修呢？这个时候就需要用到css，因为它是样式语言也可以叫修饰语言。简单来说CSS就是用来美化结构的，而CSS3功能更强大，因为它可以做到有些js脚本才可以办到的事，比如运动和动画。

随着社会的不断发展，web2.0技术的流行，之前的 CSS2.1 标准和相关技术已经满足不了日益增长的开发需求：人们需要实现更加美观、用户体验更好的界面，这个时候CSS3应运而生，新增加的属性功能非常强大和完美，只需要输入几行简单的代码就可以实现出一系列令人眼前一亮的效果，很炫酷不仅降低了复杂度，还变得易维护和修改了，在性能上也有了质的飞跃，相比较并不比JavaScript代码差多少。

CSS3发展便利了开发，降低了学习成本，有以下特点：

第一，开发门槛低。相比其他编程语言更适合零基础的开发者，入门简单，学习曲线平缓。

第二，可以让开发人员很快找到成就感，写出的页面效果很炫酷，用户体验更高。

第三，有利于开发和维护，还能提高网站的性能，增加网站的可访问性，可用性。

第四，使网站能适配更多的设备，利于seo网站优化，提高网站的搜索排名。

CSS3 2D炫酷动效里面的知识：有位移与变形处理

1、CSS3 transform：对元素进行变形处理。允许元素进行位移、缩放、旋转。需要和下面的translate()、scale()、rotate()等属性配合使用，单独使用没有任何效果。

2、translate（）属性：可以使元素在2D空间移动，也可以在3D空间也就是3位空间移动。括号里可以写两个值，值1表示水平位置，值2表示垂直位置，值1和值2用逗号隔开。

也可以分开写如下图：

3、scale()属性：可以使元素进行缩放。默认值为１，当值大于１时，元素放大，反之小于１大于0.01时，元素缩小。里面可以写两个值，如上。

也可以分开写如下图：

4、rotate()属性：可以让元素在任何轴旋转。为此，CSS3新增三个旋转函数：rotateX()、rotateY()和rotateZ()。

折扇效果

以上都是CSS3 2D 位移与变形处理的简单应用，通过代码可以看出语法上也很简单易记忆。讲了那么多位移与变形处理的优点，没有说什么缺点。那接下来看看有哪些缺点？

1、现阶段，CSS3还处于不断发展和完善中，由各大浏览器厂商采用所用的核心架构和代码不一样，在不同的浏览器上运行代码，会出现兼容问题。

2、做兼容必须加上各浏览器的特有的私有前缀属性。如：谷歌的是webkit、火狐的是moz、IE是ms。

3、CSS3 位移与变形处理属性在一定程度上应用还没有那么广，目前手机端应用的比较多。

通过介绍位移与变形处理的相关知识点我们有了比较全面的认识。在工作还是学习中都可以去尝试着去用，去思考，最重要的是动手去敲代码，只有做的多敲得多熟练了才能有创新写出炫酷的效果。无论因为什么原因让你选择学习新的IT知识，有件事情都是必须要做的，那就是设法爱上编程，把编程培养成自己的爱好。

来源：千锋ＨTML5