整理transform 、 transition 、animation

transform（ [trænsˈfɔːm] 使改变;使改观;使转换）

1. 旋转 rotate 默认Z轴

单位deg，正数为顺时针旋转，负数为逆时针旋转
例如：
transform：rotate（45deg）
			rotateX
			rotateY
			rotateZ
			rotate3d 三维空间的一根线进行旋转，（1, 1, 1, 0deg）
				perspective:     井深  3d效果
				 perspective-origin:0 0;

transform-origin:center center ；坐标中心，默认是center center

2.缩放 scale

表示缩放倍数，例如：
transform：scale(0.5)
transform：scale(0.5, 1)
一个参数时：表示水平和垂直同时缩放该倍率
两个参数时：第一个表示水平方向的缩放倍率，第二个表示垂直方向的缩放倍率

	transform：scaleX(0.8)
	transform：scaleY(1.2)

3.倾斜skew 默认X轴

表示倾斜角度，例如：
transform:skew(30deg)
transform:skew(30deg, 30deg)
一个参数时：表示水平方向的倾斜角度
两个参数时：第一个表示水平方向的倾斜角度，第二个表示垂直方向的倾斜角度
首先需要说明的是：skew的默认原点transform-origin是这个物件的中心点，即
transform-origin：center  center

transform:skewX(30deg)
transform:skewY(45deg)		
		preserve-3d保留3d，2d转3d	

4.移动 translate 默认X轴

表示移动距离，例如：
transform：translate(45px);
transform:translate(50px, 150px);
一个参数时：表示水平方向的移动距离
两个参数时：第一个表示水平方向的移动距离，第二个表示垂直方向的移动距离

	translateX
	translateY
	trsnslateZ
	trsnalate3d

5.基准点 transform-origin

在使用transform方法进行文字或图形的变形时，是以元素的中心点为基准点进行的，
使用transform-origin属性，可以改变变形的基准点
transform-origin：10px  10px;

共两个参数，表示相对左上角原点的距离，
第一个参数表示左上角原点的水平方向的距离，
第二个参数表示相对于左上角原点的垂直方向的距离；

两个参数除了可以设置为具体的像素值，
其中第一个参数还可以指定为left 、center 、right，
第二个参数可以指定为top、center 、bottom

6.多方法组合变形

用法：transform: rotate(45deg) scale(0.5) skew(30deg, 30deg) translate(100px, 100px);
这四种变形方法顺序可以随意，但不同的顺序导致变形结果不同，原因是变形的顺序是从左到右依次进行，
这个用法中的执行顺序为  1.rotate     2.scalse     3.skew    4.translate

transition（ [trænˈzɪʃn] 过渡）从一种效果改变成另一种效果

transition是一个符合性属性，包括四个子属性:
	transition-property  过渡属性(默认值为all)、
	transition-duration  过渡持续时间(默认值为0s)、
	transition-timing-function  过渡函数(默认值为ease函数)、
	transition-delay  过渡延迟时间(默认值为0s)

animation（[ˌænɪˈmeɪʃn] 动画）

由@keyframes Name来描述每一帧的样式