css3 transform方法經常使用屬性

　　　　css3中transform方法是一個功能強大的屬性，能夠對元素進行移動、縮放、轉動、拉長或拉伸等功能。

　　　　transform中最爲經常使用的4個屬性分別是：rotate();、scale();、skew();、translate()

　　　　1.旋轉rotate()在我以前地文章中提到過，在這就不重複描述了，我要在剩下的3個方法中去詳細描述

　　　　2.縮放scale();屬性，元素的尺寸會增長或者減小，根據給定的寬度（x軸）和高度（y軸）參數。　　eg：scale(2,4)是把元素寬度轉換爲原尺寸的2倍，把高度轉換爲原始高度的4倍。

　　注：這裏換成小數就是縮小！，一個參數就是寬和高一塊兒都增長或減小。

　　　　3.傾斜skew();屬性，把元素翻轉給定角度，根據給定的水平線（x軸）和垂直線（y軸）參數。　　eg:skew(30deg,20deg)圍繞x軸把元素傾斜30度，圍繞y軸把元素傾斜20度。

　　注：一個參數表示水平翻轉角度！

　　　　爲了方便你們理解，請參看下圖進行理解：

                                                                              

　　　　4.元素移動translate();屬性，元素從當前位置移動，根據給定的left（x座標）和top（y座標）的位置參數。　　eg:translate(50px,100px);元素與左邊距50px，與上邊距100px距離（若有錯誤歡迎指正）

　　注：一個參數表示水平（x軸）。

 

　　　　而後將4個屬性都寫在一塊兒，用以方便你們理解：　　　

.divtf{
	display: block;
	line-height:200px ;
	width: 200px;
	background-color: lightcyan;
	text-align: center;
	transition: all 1s linear;/*以前講過的transition，他們倆配合起來，樣式無敵啊*/
	margin: auto;
	margin-top: 150px;
}
.divtf:hover{
	transform: rotate(360deg) scale(2,2) translate(50px,50px) skew(150deg);
}
a{
	text-decoration: none;/*去掉下劃線，師哥說有下劃線像90年代網站.........*/
}

　　而後是效果圖：

         起始樣式                              

                                    　　　鼠標懸停後的樣式

　　　　哈哈，好玩吧，動手試一下才會以爲css3的樣式真是挺有意思的，其中有旋轉的動畫，可是截圖無法顯示，有興趣能夠參考下本文代碼。