css3在原來的基礎上增加了變形和動畫相關的屬性，動畫三兄弟：transform、transition和animation，通過使用這三個屬性可以達到很炫酷的效果。需要注意的是這三個屬性都是css3新增的屬性，各大瀏覽器支持方面還不是特別好，使用時要特別注意瀏覽器的兼容性，本文重點介紹Transform的使用方法，具體內容如下

瀏覽器支持情況：

Internet Explorer 10、Firefox、Opera 支持 transform 屬性。

Internet Explorer 9 支持替代的 -ms-transform 屬性（僅適用于 2D 轉換）。

Safari 和 Chrome 支持替代的 -webkit-transform 屬性（3D 和 2D 轉換）。

Opera 只支持 2D 轉換。

2D transform變換方法

•translate(x, y)方法，根據左(X軸)和頂部(Y軸)位置給定的參數，從當前元素位置移動。x, y的值可以取正負，分別表示表示向不同的方向偏移。
 •rotate(angle)方法， 表示旋轉angle角度。angle為正時，按順時針角度旋轉，為負值時，元素逆時針旋轉。
 •scale(x, y)方法，表示元素在x軸和y軸上的縮放比例，參數大于1時，元素放大，小于1時，元素縮小。
 •skew(x-angle,y-angle)方法，用來對元素進行扭曲變行，第一個參數是水平方向扭曲角度，第二個參數是垂直方向扭曲角度。其中第二個參數是可選參數，如果沒有設置第二個參數，那么Y軸為0deg
 •matrix(n,n,n,n,n,n)方法， 以一個含六值的變換矩陣的形式指定一個2D變換，此屬性值使用涉及到數學中的矩陣，感興趣的讀者可以深入了解一下，這里就不做詳細介紹了。
 
下面是上面方法的演示：

發表評論 共有條評論 用戶名: 密碼: 驗證碼: 匿名發表