今天了解了css3的动画渐变效果，如果我们要对页面中的某个元素的样式进行变化，就不用js或jquery苦苦的写代码了，直接用css3的这个transition这个属性就ok，方便快捷，下面请看demo。
一、动画效果
我要对某个div操作，例如：当鼠标移入div中，改变其width、height和background，如果不使用transition属性而直接用hover的话，会使页面非常死板、生硬，如果使用js或Jquery的话，太麻烦。transition的用法如下：
#box1{
width: 300px;height:300px;
margin:0 auto;
background: green;
-webkit-transition:background 2s,width 2s,height 2s; /*chrome safire*/
-moz-transition:background 2s,width 2s,height 2s; /*firefox*/
-o-transition:background 2s,width 2s,height 2s; /*opera*/
}
#box1:hover{
background: red;width:500px;height:500px;}transition:属性1 时间1，属性2 时间2....，属性n 时间n；
由于不同浏览器内核不同，所以要加上相应的前缀，-webkit-，-moz-,-o-。
当鼠标移入div时，使div的background、width和height产生变化，变化的时间是2s。
过渡模式：transition有5中过渡模式：
1）：ease 缓慢开始，缓慢结束（默认模式）
2）：linear 匀速
3）：ease-in 缓慢开始
4）：ease-out：缓慢结束
5）：ease-in-out：缓慢开始，缓慢结束，与ease稍有区别
其语法是：-webkit-transition:属性1 时间1 过渡模式1，属性2 时间2 过渡模式2.....;
例如：-webkit-transition:width 1s ease,height 2s linear,background 3s;
二、3D效果
要使元素获得3D效果，需要使用perspective和transform这两个属性，看如下代码
<div id="box">
<div id="block"></div>
</div>我们要让block呈现3D效果的话，可以对其加上如下css样式：
#box{
-webkit-perspective:800; /*属性定义 3D 元素距视图的距离，以像素计。*/
-webkit-perspective-origin:50% 50%;
-webkit-transform-style:-webkit-preserve-3d;
border: 1px solid red;
}
#block{
width: 500px;height: 500px;
background: green;
margin: 100px auto;
-webkit-transform:rotateX(45deg) rotateY(45deg) rotateZ(45deg);
}父元素box：
perspective属性：3D元素（子元素block）距离视图（父元素box）的距离，单位像素。
perspective-origin:眼睛所在的位置，默认50%是屏幕中心。
子元素block：
transform属性：rotateX(deg),rotateY(deg),rotateZ(deg),deg是角度的意思，使元素有旋转效果
其中X轴是水平方向，Y轴是垂直方向，Z是沿着屏幕朝外的方向。
关于transform这个属性，根据其值的不同可以产生不同的3D效果，rotate可以产生旋转的效果，translate可以产生移动的效果，例如
-webkit-transform:translateX(300px) translateY(300px) translatieZ(300px)
会沿着3个不同的方向移动，请大家注意translationZ这个值：还记得前面给父元素box设置的prespective：800这个属性吗？？Z轴的方向是沿着屏幕向外，也就是说3D元素距离复元素800px，当translateZ的时候，子元素沿着Z轴移动，此时呈现的效果是元素会离观察者越来越近哦，请大家细细体会！！！谢谢