近年來 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以上、火狐和歐朋是相容的。
想必大家在實際專案中一定會遇見p不定寬和高垂直水平居中的問題。記得以前都是用js去實作。
其實實用css來實作也有好幾種方法。但個人覺得還是用transform來實現比較簡單方便就是不相容IE9以下瀏覽器。
3. CSS3中transform、transition和animationsan三種屬性的區別實例詳解
在部分的test case當中，每每演示transform屬性的，看起來好像都是帶動畫。這使得小部分直覺化思考的人認為transform屬性是動畫屬性。而相反，transform屬性是靜態屬性，一旦寫到style裡面，就會直接顯示作用，沒有任何變化過程。 transform的主要用途是用來做元素的特殊變形，對於做設計的人來說並不是很陌生，簡單的來說就是css 的圖形變形工具。
transform：變形
旋轉：rotate()：度數
斜切：skew()：度數
skewX
skewY
縮放：scale()：正數、負數、小數
#scaleX
scaleY
位移：translate()：css支援的單位都可以
translateX
translateY
transform的執行順序：後寫的先執行
transform: scale(2) rotate(50deg); 先執行旋轉，在執行縮放
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 的變換使自己也自然的達到相應的變換效果。
相關問答
2 . transition transform初始display:block怎麼就沒移動效果？
【相關推薦】
1. php中文網免費影片教學：《php.cn獨孤九賤（2）－css影片教學》
2. php中文網免費影片教學：css3實作網頁平滑過渡效果影片教學
以上是css3 transform屬性詳解及transform使用總結的詳細內容。更多資訊請關注PHP中文網其他相關文章！
