css3變形篇
旋轉rotate（）
旋轉rotate()函式通過指定的角度引數使元素相對原點進行旋轉。它主要在二維空間內進行操作，設定乙個角度值，用來指定旋轉的幅度。如果這個值為正值，元素相對原點中心順時針旋轉；如果這個值為負值，元素相對原點中心逆時針旋轉。
例子：
扭曲skew（）
扭曲skew()函式能夠讓元素傾斜顯示。它可以將乙個物件以其中心位置圍繞著x軸和y軸按照一定的角度傾斜。這與rotate()函式的旋轉不同，rotate()函式只是旋轉，而不會改變元素的形狀。skew()函式不會旋轉，而只會改變元素的形狀。一共有三種情況，分別是：
1、skew(x,y)使元素在水平和垂直方向同時扭曲（x軸和y軸同時按一定的角度值進行扭曲變形），第乙個引數對應x軸，第二個引數對應y軸。如果第二個引數未提供，則值為0，也就是y軸方向上無斜切。；
2、skewx(x)僅使元素在水平方向扭曲變形（x軸扭曲變形）；
3、skewy(y)僅使元素在垂直方向扭曲變形（y軸扭曲變形）。
例子：
縮放scale（）
縮放 scale()函式 讓元素根據中心原點對物件進行縮放。縮放 scale 具有三種情況：
1、 scale(x,y)使元素水平方向和垂直方向同時縮放（也就是x軸和y軸同時縮放），注意：y是乙個可選引數，如果沒有設定y值，則表示x，y兩個方向的縮放倍數是一樣的；
2、scalex(x)元素僅水平方向縮放（x軸縮放）；
3、scaley(y)元素僅垂直方向縮放（y軸縮放）。
例子：
位移translate（）
translate()函式可以將元素向指定的方向移動，類似於position中的relative。或以簡單的理解為，使用translate()函式，可以把元素從原來的位置移動，而不影響在x、y軸上的任何web元件。同樣分為三種情況：
1、translate(x,y)水平方向和垂直方向同時移動（也就是x軸和y軸同時移動）；
2、translatex(x)僅水平方向移動（x軸移動）；
3、translatey(y)僅垂直方向移動（y軸移動）。
例子：
矩陣matrix（）
matrix() 是乙個含六個值的(a,b,c,d,e,f)變換矩陣，用來指定乙個2d變換，相當於直接應用乙個[a b c d e f]變換矩陣。就是基於水平方向（x軸）和垂直方向（y軸）重新定位元素,此屬性值使用涉及到數學中的矩陣。
原點transform-origin
任何乙個元素都有乙個中心點，預設情況之下，其中心點是居於元素x軸和y軸的50%處。在沒有重置transform-origin改變元素原點位置的情況下，css變形進行的旋轉、位移、縮放，扭曲等操作都是以元素自己中心位置進行變形。但很多時候，我們可以通過transform-origin來對元素進行原點位置改變，使元素原點不在元素的中心位置，以達到需要的原點位置。
transform-origin取值和元素設定背景中的background-position取值類似，如下表所示：
例子：
css3中變形與動畫（一）
css3製作動畫的幾個屬性 變形 transform 過渡 transition 和動畫 animation 首先介紹transform變形。transform英文意思 改變，變形。css3中transform主要包括以下幾種 旋轉 rotate 扭曲 skew 縮放 scale 移動 transl...
CSS3中的變形與動畫
css3常見的動畫效果的實現，其實主要是靠transition和animation。而通常，這兩個又會和css3中的新屬性transform來搭配使用 那麼這三個東西其實是幹什麼用的呢？我按我自己的理解來下個簡單結論。transform 把元素變形 transition 元素的屬性變化時，給他乙個過...
Css3中的變形與動畫
下面的 列出了所有的轉換屬性 屬性描述 csstransform 向元素應用 2d 或 3d 轉換。3transform origin 允許你改變被轉換元素的位置。32d transform 方法 matrix n,n,n,n,n,n 定義 2d 轉換，使用六個值的矩陣。translate x,y ...