語法
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使用參考指南
2010 09 18 16 06 33 分類 html5 css3 字型大小 訂閱 語法 transform none 取值 指定乙個身份轉變 說明 應用於block水平和inline水平的元素。transform可以對元素進行角度旋轉和縮放,請使用webkit核心最新版瀏覽器瀏覽該文章以保證css...
Nmap參考指南
來自精靈部落格的nmap參考指南 nmap是乙個網路連線端掃瞄軟體,用來掃瞄網上電腦開放的網路連線端。確定哪些服務執行在哪些連線端,並且推斷計算機執行哪個作業系統 這是亦稱 fingerprinting 它是網路管理員必用的軟體之一,以及用以評估網路系統安全。正如大多數被用於網路安全的工具,nmap...