本文主要内容：
transition的中文含义是过渡。过渡是CSS3中具有颠覆性的一个特征，可以实现元素不同状态间的平滑过渡（补间动画），经常用来制作动画效果。
transition 包括以下属性：
上面的四个属性也可以写成综合属性：
transition: 让哪些属性进行过度 过渡的持续时间 运动曲线 延迟时间;
transition: all 3s linear 0s;其中，transition-property这个属性是尤其需要注意的，不同的属性值有不同的现象。我们来示范一下。
如果设置 transition-property: width，意思是只让盒子的宽度在变化时进行过渡。效果如下：
如果设置 transition-property: all，意思是让盒子的所有属性（包括宽度、背景色等）在变化时都进行过渡。效果如下：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS 过渡</title>
<style>
body {margin:0;padding:0;background-color:#eeeeee;}.content{width:800px;height:320px;padding-left:20px;margin:80pxauto;}.item{width:230px;height:300px;text-align:center;margin-right:20px;background-color:#FFF;float:left;position:relative;top:0;overflow:hidden;/* 让溢出的内容隐藏起来。意思是让下方的橙色方形先躲起来 */transition: all .5s;/* 从最初到鼠标悬停时的过渡 */}.item img {margin-top:30px;}.item.desc{position:absolute;left:0;bottom:-80px;width:100%;height:80px;background-color:#ff6700;transition: all .5s;}/* 鼠标悬停时，让 item 整体往上移动5px，且加一点阴影 */.item:hover{top:-5px;box-shadow:0015px#AAA;}/* 鼠标悬停时，让下方的橙色方形现身 */.item:hover.desc{bottom:0;}</style>
</head>
<body>
<div class="content">
<div class="item">
<img src="./images/1.png" alt="">
</div>
<div class="item">
<img src="./images/2.png" alt="">
<span class="desc"></span>
</div>
<div class="item">
<img src="./images/3.jpg" alt="">
<span class="desc"></span>
</div>
</div>
</body>
</html>
效果如下：
动画效果录制的比较差，但真实体验还是可以的。
工程文件：
转换是 CSS3 中具有颠覆性的一个特征，可以实现元素的位移、旋转、变形、缩放，甚至支持矩阵方式。
转换再配合过渡和动画，可以取代大量早期只能靠 Flash 才可以实现的效果。
在 CSS3 当中，通过 transform 转换来实现 2D 转换或者 3D 转换。
我们依次来讲解。
格式：
transform: scale(x, y);
transform: scale(2, 0.5);
参数解释： x：表示水平方向的缩放倍数。y：表示垂直方向的缩放倍数。如果只写一个值就是等比例缩放。
取值：大于1表示放大，小于1表示缩小。不能为百分比。
格式举例：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>.box{width:1000px;margin:100pxauto;}.box div {width:300px;height:150px;background-color: pink;float:left;margin-right:15px;color:white;text-align:center;font:40030px/150px “宋体”;}.box.box2{background-color:green;transition: all 1s;}.box.box2:hover{/*width: 500px;*//*height: 400px;*/background-color: yellowgreen;/* transform: css3中用于做变换的属性 scale(x,y)：缩放 */transform: scale(2, 0.5);}</style>
</head>
<body>
<div class="box">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box