transform使用參考指南

2021-09-08 09:50:58 字數 1635 閱讀 4269

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...