css3之元素的缩放、渐变、旋转和平移

首先，我们来看元素的渐变，我先上代码：

效果如下：

这里的transition:all 1s ease;就是渐变的作用，我来解释一下这句代码的各种元素的意义：
transition 是css3中一个新的css样式，作用是渐变，all代表渐变所有的元素，1s代表渐变的时间，ease代表匀速渐变。
这里的all可以用width,height,或者background代替，但前提是一定要在元素中有这个样式，才能对这个样式进行渐变式的改变。
我们看到，在.box 和 .box:hover的地方都加上了这个代码，为什么2边都要加呢？
在.box:hover中加入这行代码的意义是用于当鼠标移动上去时所产生的渐变效果，在.box中加入这行代码的意义是用于当鼠标移开时所产生的渐变效果，如果有一方不加，则会导致不加的那一方在进行样式变化的时候不会产生渐变的效果，如图：
如果我去掉了.box中的transition:all 1s ease：

效果如图：

transition的第3个属性有很多，分别为linear,ease,ease-in,ease-out,ease-in-out,
为了方便比对，我们先定义一些div：

我们先来看一下效果：

在上图的gif中，我们可以很清楚的看到这些不同样式的区别，下面我来详细的解释一下：
linear:匀速运动
ease:从初始状态过渡到终止状态，由快到慢，逐渐变慢
ease-in:从初始到终止速度越来越快，呈一种加速状态
ease-out:从初始到终止速度越来越慢，呈一种减速状态
ease-in-out:先加速再减速

接下来，我们来讲一下transform 动画：
transform里有缩小(scale)，旋转(rotate)，平移(translate)，倾斜(skew)
我们先定义一张图片：

效果如下：

之后，我们结合元素过渡来进行图片的缩放：

transform:scale(0.9) 这句代码的效果就是缩小元素 0.9代表当触发时，图片变成原来的0.9倍。若该值>1，则进行放大，若<0 并且 <1，则缩小。
下面我们来看一下transform的旋转：rotate：

transform:rotate(x)代表旋转，x代表旋转的角度。
rotate可以单独的对旋转进行设置，分别为rotateX,rotateY,rotateZ。rotate跟哪一个轴，就围绕哪一个轴旋转，这个大家可以自己去实现一下，这里就不再做更多解释了。
接下来我们来看一下transform下的平移效果，代码如下：

那么transform:translate(x,y) , x代表的是平移X轴，y代表的是平移y轴，同样，translate也可以结合scale和rotate 进行连写。中间用空格区分开。
最后呢，我们来看一下transform的最后一个样式，倾斜(skew)，先上代码：

transform:skew(xdeg) ,其中x代表的是倾斜的角度。

以前所有效果都没有通过gif的图片展示出来，是因为很多gif动图的大小都不符合上传的标准，所以干脆就都不上传了，大家代码写出来了自己运行一下效果即可。