变形translate()，transform-origin()

（一）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时，表示的是所有中点值的属性。