要說css3最受大家歡迎的新功能，無外乎動(dòng)畫紧显、變形讲衫、媒體查詢和彈性布局。今天來說說css3的變形—transform孵班。
屬性
rotate：旋轉(zhuǎn)
單位：deg(度)
transform:rotate(20deg);//順時(shí)針旋轉(zhuǎn)20度
transform:rotate(-20deg);//逆時(shí)針旋轉(zhuǎn)20度
skew：扭曲
單位：deg(度)
transform:skew(20deg,20deg);//水平和垂直都扭曲20deg(如果度數(shù)相同也可以只寫一個(gè)參數(shù))
transform:skewX(20deg);//水平扭曲20度
transform:skewY(20deg);//垂直扭曲20度
scale：縮放
transform:scale(1.5,2);//水平擴(kuò)大1.5倍涉兽，垂直擴(kuò)大2倍
translate：位移
單位：百分比、px
transform:translate(10%,10%);//水平和垂直平移自身寬和高的10%
使用translate實(shí)現(xiàn)寬高不固定的水平垂直居中
div{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%.-50%);
}
transform-origin：改變變形的原點(diǎn)
單位：百分比篙程、px
位移枷畏、縮放、扭曲虱饿、旋轉(zhuǎn)默認(rèn)是以本身的中心作為原點(diǎn)的拥诡，通過transform-origin可以改變原點(diǎn)触趴。
transform-origin:0% 0%;//以左上角作為原點(diǎn)
transform-origin:0% 100%;//以右上角作為原點(diǎn)
transform為了兼容各瀏覽器要寫相應(yīng)的hack
-webkit-transform
-moz-transform
-ms-transform
-o-transform
transform
