要說css3最受大家歡迎的新功能，無外乎動畫、變形、媒體查詢和彈性布局。今天來說說css3的變形——transform ### 屬性 #### rotate：旋轉 單位：deg(度) ~~~ transform:rotate(20deg);//順時針旋轉20度 transform:rotate(-20deg);//逆時針旋轉20度 ~~~ <br> #### skew：扭曲 單位：deg(度) ~~~ transform:skew(20deg,20deg);//水平和垂直都扭曲20deg(如果度數相同也可以只寫一個參數) transform:skewX(20deg);//水平扭曲20度 transform:skewY(20deg);//垂直扭曲20度 ~~~ <br> #### scale：縮放 ~~~ transform:scale(1.5,2);//水平擴大1.5倍，垂直擴大2倍 ~~~ <br> #### translate：位移 單位：百分比、px ~~~ transform:translate(10%,10%);//水平和垂直平移自身寬和高的10% ~~~ 使用translate實現寬高不固定的水平垂直居中 ~~~ div{ position:absolute; top:50%; left:50%; transform:translate(-50%.-50%); } ~~~ #### transform-origin：改變變形的原點 單位：百分比、px 位移、縮放、扭曲、旋轉默認是以本身的中心作為原點的，通過transform-origin可以改變原點。 ~~~ transform-origin:0% 0%;//以左上角作為原點 transform-origin:0% 100%;//以右上角作為原點 ~~~ <br> #### transform為了兼容各瀏覽器要寫相應的hack -webkit-transform -moz-transform -ms-transform -o-transform transform