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);
			}