2010-09-18 16:06:33
| 分類：
html5+css3|字型大小
訂閱 語法
transform ：none | [ ]*
取值
指定乙個身份轉變
說明
應用於block水平和inline水平的元素。
transform可以對元素進行角度旋轉和縮放,請使用webkit核心最新版瀏覽器瀏覽該文章以保證css3效果能夠完全呈現
在設定了transform屬性後，可以設定transform-origin屬性，這個屬性控制變形時的源點，也就是變形時圍繞的點。這個屬性接受兩個引數，可以是百分比、top/center/bottom、帶單位的數值。
相容性
瀏覽器支援情況:-webkit-transform,-moz-transform,-o-transform,目前對css3動畫支援的最好最全面的是webkit核心瀏覽器。
示例
transform的屬性包括：rotate() / skew() / scale() / translate(,) ，分別還有x、y之分，比如：rotatex() 和 rotatey() ，以此類推。
有五種變形樣式，可以重疊多種變形樣式，以空格分隔
1.scale：縮放，1為原始大小。scale(x)。正數放大，負數縮小。屬性值為乙個時，x/y軸同時縮放；屬性值為兩個值時，分別控制x、y軸的縮放。
.scale效果圖如下：.scale:hover
.scale效果圖如下：.scale:hover
2.rotate：水平旋轉，屬性值格式為xdeg。(deg是「度」的意思)rotate(xdeg)。x為正數時，順時針旋轉；為負數時，逆時針旋轉
.rotate效果圖如下：.rotate:hover
.rotate效果圖如下：.rotate:hover
3.translate：定位元素，基於xy軸重新定位元素。translate(xpx,ypx)。屬性值為乙個時，x、y軸引數相同；為兩個時，x、y軸分別定位
.translate效果圖如下：.translate:hover
4.skew：將元素沿水平方向傾斜變形。skew(xdeg,ydeg)。這個比較難表述，想象一下平行四邊形吧。屬性值為乙個時，x、y軸引數相同；為兩個時，x、y軸各自傾斜
.skew效果圖如下：.skew:hover
.skew效果圖如下：.skew:hover
5.matrix：矩陣，六個值。
.matrix效果圖如下：.matrix:hover
transform使用參考指南
語法 transform none 取值 指定乙個身份轉變 說明 應用於block水平和inline水平的元素。transform可以對元素進行角度旋轉和縮放,請使用webkit核心最新版瀏覽器瀏覽該文章以保證css3效果能夠完全呈現 在設定了transform屬性後，可以設定transform o...
transform使用參考指南
語法 transform none 取值 指定乙個身份轉變 說明 應用於block水平和inline水平的元素。transform可以對元素進行角度旋轉和縮放,請使用webkit核心最新版瀏覽器瀏覽該文章以保證css3效果能夠完全呈現 在設定了transform屬性後，可以設定transform o...
Nmap參考指南
來自精靈部落格的nmap參考指南 nmap是乙個網路連線端掃瞄軟體，用來掃瞄網上電腦開放的網路連線端。確定哪些服務執行在哪些連線端，並且推斷計算機執行哪個作業系統 這是亦稱 fingerprinting 它是網路管理員必用的軟體之一，以及用以評估網路系統安全。正如大多數被用於網路安全的工具，nmap...