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以上、火狐和歐朋是相容的。

想必大家在實際專案中一定會遇見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實作網頁平滑過渡效果影片教學

以上是css3 transform屬性詳解及transform使用總結的詳細內容。更多資訊請關注PHP中文網其他相關文章！