要说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