动画

一:变形与透视

	1.动画过渡 transition: 2s;

	2.translateX(像素,占据元素本身的百分比)  translateY(同)
		translateZ：不能使用百分比

	3.元素居中
	
		1.flex弹性布局
		2.transform:translate(-50%,-50%);
			left:50%;
			top:50%;
		3.margin-left + margin-top 
	/*
			.div
			{
				position:absolute;
				background:red;
				width:100px;
				height:100px;
				
			}
			.sondiv {
				position:relative;
				background:blue;
				width:10px;
				height:10px;
				transform:translate(-50%,-50%);
				left:50%;
				top:50%;
			}
		<div class="div">
				<div class="sondiv">
				</div>
			</div>
	*/
		
	

	4.2D缩放使用方法
		transform:scaleX(2);
		//宽度变成原来的两倍
		transform:scaleX(.5);
		//宽度变成原来的一半倍；
		高度同理transform:scaleY(.5);
	
		transform:scale(2,.5);
		//同时改变高和宽

 5.3D视图中Z轴的使用
	 1>透视 旋转
		transform:perspective(900px) rotateY(45deg);
		transform:scaleZ(2);
	
	"拉伸：轴在变化"

	
6.使用scale3D同时改变三轴缩放
body:hover main 
{
  transition: 1s; 
  transform:perspective(900px) rotateY(45deg) 
	scale3d(2,1,6);
}

7.按X轴旋转物体与透视查看
	transform:perspective(900px) rotateX(90deg);

8.元素倾斜：
	transform:skewX(45deg); transform:skewY(-45deg);
	transform:skew(45deg,-45deg);

Citation:

References:

• 一:变形与透视