css3 transform屬性詳解及transform使用總結

近年來 HTML5 和 CSS3 發展迅速，國內外不乏一些大站，酷站都在使用最新的技術，各家廠商的瀏覽器對它們的相容性越來越好。CSS3中有一個強大的屬性 Transform。有了這個特性，各種特效輕鬆搞定。引用一句歌詞“旋轉，跳躍，我不停歇”。從字面上就能看出，Transform 是 變型 的意思，他的值主要包括 旋轉rotate，扭曲skew，縮放scale，移動translate以及矩陣變形matrix 。下面的內容就來聊聊CSS3中的這個重要的屬性。

首先可以學習php中文網相關的免費課程

1. 觀看《CSS3 3D 特效視頻教程》中 transform屬性

2. 學習《CSS3從入門到精通教程》中的 CSS3 transform轉換 教程

transform屬性

1. 關於CSS3元素2D平面變換屬性transform的實現方法

CSS3的形狀變換允許我們對元素展開、縮放等等 這篇我主要談下一2D平面變換 屬性transform可以進行變換 transform就是變形的意思 並且它主要通過函數來使用，有以下函數translate() 平移變換ratate() 旋轉變換scale() 縮放變換skew() 傾斜變換matrix() 矩陣變換transform-origin則時定義變換的中心平移變換

2. css3中關於transform屬性實現div不定寬高垂直水平置中的詳細介紹

transform的相容性還是比較樂觀的。IE9以下不相容，IE9支援代替的-ms-transform屬性不過只支援2D轉換。

Google和Safari支援代替的-webkit-transform屬性。IE9以上、Firefox和歐朋是相容的。

想必大家在實際項目中肯定會遇見p不定寬和高垂直水平置中的問題。記得以前都是用js去實現。

其實用css來實現也有好幾種方法。但是個人覺得還是用transform來實現更簡單和方便就是不相容IE9以下瀏覽器。

3. CSS3中transform、transition和animationsan三種屬性的區別執行個體詳解

在部分的test case當中，每每示範transform屬性的，看起來好像都是帶動畫。這使得小部分直覺化思維的人認為transform屬性是動畫屬性。而恰恰相反，transform屬性是靜態屬性，一旦寫到style裡面，將會直接顯示作用，無任何變化過程。transform的主要用途是用來做元素的特殊變形，對於做設計的人來說並不是很陌生，簡單的來說就是css 的圖形變形工具。

4. css變形transform屬性詳細介紹

transform：變形

旋轉：rotate()：度數

斜切：skew()：度數

skewX

skewY　　

縮放：scale()：正數、負數、小數

scaleX

scaleY

位移：translate()：css支援的單位都可以

translateX

translateY　　

transform的執行順序：後寫的先執行

transform: scale(2) rotate(50deg);　先執行旋轉，在執行縮放　

5. CSS中transform 屬性

CSS中transform 屬性允許你修改CSS可視化模型的座標空間。通過transform，可以讓元素進行移動（translate）、旋轉（rotate）、縮放（scale）、傾斜（skew）。

如果該屬性有一個非none值, 將會產生一個層疊上下文. 在這種情況下 對象將作為它包含的 position: fixed 元素的包含塊（a containing block）。

6. CSS3 transform 對HTML文檔流帶來的影響

body(或html) 加了 transform 屬性以後，整個 body DOM 既會產生相應的變換，但此時的“整個”僅是指 body 下標準文檔流元素，對於那些 position: absolute; / position: fixed; 元素，因為已經脫離了 body 所屬的文檔流，所以無法憑藉 body 的變換使自己也自然的達到相應的變換效果。

相關問答

1. transform 製作滾動效果為什麼需要兩個元素

2. transition transform初始display:block怎麼就沒移動效果？

3. CSS3 transform 怎樣才能中心旋轉？

【相關推薦】

1. php中文網免費視頻教程：《php.cn獨孤九賤（2）－css視頻教程》

2. php中文網免費視頻教程：css3實現網頁平滑過渡效果視頻教程