（一）translate()函数可以将元素向指定的方向移动，类似于position中的relative。或可以简单的理解为，使用translate()函数，可以把元素从原来的位置移动，而不影响在X、Y轴上的任何Web组件。
translate我们分为三种情况：
1.translate（x,y）水平方向和垂直方向同时移动(也就是x轴和Y轴同时移动)
2.translateX(x)仅水平方向移动（X轴移动）
3.translateY(y)仅垂直方向（Y轴移动）
实例：
让不知道宽度和高度的元素实现水平、垂直居中。
.wrapper {
padding: 20px;
background:orange;
color:#fff;
position:absolute;
top:50%;
left:50%;
border-radius: 5px;
-webkit-transform:translate(-50%,-50%);
-moz-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
}
解析：
1. top：50%，left：50%，是将色块的左上角定位在了屏幕的中央，但是，整体并不在中央；
2. translate的百分比是根据自身的宽度和高度来定的，translate(-50%,-50%) 配合 top：50%，left：50% 实现了居中
（二）矩阵matrix()
matrix()是一个含六个值的（a,b,c,d,e,f）变换矩阵，用来指定一个2D变换，相当于直接应用一个[a b c d e f]变换矩阵。就是基于水平方向（X）轴和垂直方向（Y轴）重新定位元素，此属性值使用涉及到数学中的矩阵。
也可以这样理解：
a为元素的水平伸缩量，１为原始大小；
b为纵向扭曲，０为不变；
c为横向扭曲，０不变；
d为垂直伸缩量，１为原始大小；
e为水平偏移量，０是初始位置；
f为垂直偏移量，０是初始位置
（二）原点transform-origin
任何一个元素都有一个中心点，默认情况下，其中心点是居于元素X轴和Y轴的50%处。如下图所示：
在没有重置transform-origin改变元素原点位置的情况下，CSS变形进行的旋转，位移，缩放，扭曲等操作都是以元素自己中心位置进行变形。但很多时候，我们可以通过transform-origin来对元素进行原点位置改变，使元素原点不在元素的中心位置，以达到需要的原点位置。
transform-origin取值和元素设置背景中的background-position取值类似，如下表所示：代表改变后基点的位置，比如在左下角，右下角，左上角，右上角
其中 left,center right是水平方向取值，对应的百分值为left=0%;center=50%;right=100%
而
top center bottom是垂直方向的取值，其中top=0%;center=50%;bottom=100%;
如果只取一个值，表示垂直方向值不变。
注：
transform-origin并不是transform中的属性值，他具有自己的语法。
但是他要结合transform才能起作用。
（三）过渡属性transition-property
早期在Web中要实现动画效果，都是依赖于JavaScript或Flash来完成。但在CSS3中新增加了一个新的模块transition，它可以通过一些简单的CSS3事件来触发元素的外观变化，让效果显得更加细腻。简单点来说，就是通过鼠标的单击，获得焦点，被点击或对元素任何改变中触发，并平滑地以动画效果改变CSS的属性值。
先来看transition-property属性
transition-property用来指定过渡动画的CSS属性名称，而这个过渡属性只有具备一个中点值的属性（需要产生动画的属性）才能具备过渡效果，其对应具有过渡的CSS属性主要有：
特别注意：当“transition-property”属性设置为all时，表示的是所有中点值的属性。
