使用css3快一年了，总觉得该写点什么来记录一下我对css3的理解，或者说对比一下css3和css2及更老的版本的区别，这样才更能提升理解！在这篇文章中，如果没有特别说明，用css2代表除开css3以外的所有css版本！在我的开发过程中，css3给我的感觉就是样式属性比css2多了一些，能写出更多精彩的效果，很多以前用css2写的时候要用hack的效果，在css3完全有个样式属性来表现这个效果了，比如圆角、边框背景等！但在这篇文章里，我不想赘述这些知识了，我想从以下几个方向来谈谈对css3的思考、理解！为了尽快说明问题，文章中不做hack部分的编写，读者心中有数就好！
transition英文是过渡的意思，顾名思义，在网页这一块就是表示你的页面从一种状态变换到另一种状态中间的过渡阶段，比如你一个dom从宽度100px变换到200px，css3过渡就描述dom如何从100px变换到200px,如果在css2中，不用js的话，那么这两种状态将会很生硬的变化，你可能看到的是一下就从100px变化到200px了，怎么说呢！这样的体验是不够好的，因为用户很难让用户感受到有一个变化的过程，而且中间还可以给用户一个思考的缓冲时间，让它淡化中间枯燥的浏览过程！这在css3中就不一样了，你完全可以定义这个中间过渡过程！
使用方法：我们先来介绍transition的复合属性使用方法，代码如下：
transition: property during-time time-function delay-time;
我们来分别介绍上面四个属性值代表什么！property表示你希望目标dom的什么样式属性有一个过渡效果，比如上面举的例子我们想让其宽度有一个过渡效果，所以property就为width；during-time表示你希望中间过渡效果需要多长的时间，比如我们需要0.8秒完成这个过渡效果，那么可以把它的值设置为0.8s;time-function表示你过渡希望以什么样的一个方式过渡，css3默认有很多效果，当然了你也可以自定义，需要用到一个贝塞尔函数cubic-bezier(n,n,n,n)，这个函数有需要的可以去了解下，不过按我目前的理解来说，默认的一些效果已经足够使用了，比如可以使用淡入效果ease-in;delay-time表示你的过渡效果在一定的延迟时间后才开始，比如你希望在0.3秒之后才开始过渡，那么它的值就可以设置为0.3s;按如此思路下去，将得来下面的代码：
transition:width 0.8s ease-in 0.3s;
上面说到的四个属性，你并不一定要全部写出来，当某一个属性没有写的时候，那么它的值将会是默认的值，比如把上面的代码改成如下：
transition:width 0.8s 0.3s;
这里显然过渡采取的方式并没有写出来，那么它的值就是linear,因为它的默认值就是linear。还有一点特表注意的时候，如果只写了一个时间，那么这个时间一定是过度持续时间，而延迟时间默认为0，但是如过有两个时间的话，那么第一个时间一定是动画持续时间，第二个时间一定是动画延迟时间。比如这里0.8s一定是过渡持续时间，而0.3s一定是过渡延迟时间。采用复合属性的方式定义transition，你还可以定义多个属性的过渡效果，中间用逗号隔开。如下：
transition:property1 during-time time-function delay-time,property2 during-time time-function delay-time;
你甚至可以把第一个属性定义为all，让所有的属性都具有过渡效果！
当然了，你也可以不采用复合属性的方式定义transition，分开单独写，那么格式将会是这样子，如下；
transition-property:value1;
transition-duration:time1;
transition-time-function:value2;
transition-delay:time2;
不过这样会增加代码量！所以该怎么写，你可以按自己的习惯来！
请把鼠标移动到下面的红色方块上，等待0.3秒之后，将会看见红色方块宽度将会从100px缓慢变到200px，变换时间持续0.8s,整个过程持续1.1s!
为了加深记忆，做了一张图，下面这张图是大概效果。因为是用ps做的，所以看上去会有一点瑕疵，不过足以说明，我们的transition是干嘛的就好！
这个css3属性主要定义你的dom怎么变化，甚至你可以利用它做很多3d效果。其下面主要四种属性值，分别是旋转rotate、移动translate、倾斜skew、缩放scale。接着我们分别来介绍这四个属性的使用方法！
1、rotate!这个描述的是旋转效果