CSS3之2D变形

transform是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、倾斜、缩放，甚至支持矩阵方式，配合过渡和即将学习的动画知识，可以取代大量之前只能靠Flash才可以实现的效果

1、 移动 translate(x, y)

使定位的盒子水平垂直居中

div{			
				width: 220px;
				height: 200px;
				background-color: pink;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%,-50%);/*移动自己宽度的一半*/
			}

2、 缩放 scale(x, y)

使图片放大显示

div{
				margin: 10px;		
				width: 220px;
				height: 200px;
				overflow: hidden;
			}
div img{
			   	transition: all 0.5s ease 0;
    	/*transition(过渡效果): 要过渡的属性  花费时间  运动曲线  何时开始
    				如果有多组属性变化，还是用逗号隔开。*/
			}
div img:hover{
				transform: scale(1.1);
			}

3、旋转 rotate(deg)：正值为顺时针，负值为逆时针

使盒子以右上角为中心旋转

div{
				margin: 200px;		
				width: 220px;
				height: 200px;
				background-color: pink;
				transition: all 0.5s;
				transform-origin: right top;
			}
div:hover{
				transform: rotate(45deg);
			}