transform

语法

transform: none| rotate | scale | skew | translate | matrix;
通过transform-origin可以设置转换参考位置，默认值为50% 50%,即 center center
1.rotate(<angle>)：旋转，参照转换中心旋转，如transform:rotate(60deg);
2.scale(<number>[, <number>])：缩放，参数1表示沿X轴方向缩放，参数2表示沿Y轴方向缩放，如果只提供一个参数，则第二个参数值与第一个相等，相关属性：scaleX(<number>), scaleY(<number>)
3.translate(<length>[, <length>])：平移，参数1表示沿X轴方向平移，参数2表示沿Y轴方向平移，如果只提供一个参数，则第二个参数值为0，相关属性：translateX(<length>), translateY(<length>)
4.skew(<angle>[,<angle>]):扭曲，参数1表示沿X轴方向扭曲，参数2参数表示沿Y轴方向扭曲，如果只提供一个参数，则第二个参数为0，相关属性：skewX(<angle>), skewY(<angle>)
5.matrix(<number>,<number>,<number>,<number>,<number>,<number>)：以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换，相当于直接应用一个[a,b,c,d,e,f]变换矩阵

一、旋转rotate

.rotate-1{ 
    width:100px;
    height:100px; 
    background-color:#f90; 
    -webkit-transform:rotate(30deg); 
    -moz-transform:rotate(30deg); 
    transform:rotate(30deg); //顺时针旋转30度
}

二、缩放scale

.scale-1{ /*缩小*/
    display:inline-block; 
    width:100px; 
    height:100px; 
    line-height:100px; 
    text-align:center; 
    background-color:#66f; 
    -webkit-transform:scale(0.5, 0.5); 
    -moz-transform:scale(0.5, 0.5); 
    transform:scale(0.5, 0.5);
}
.scale-2{ /*放大*/
    display:inline-block; 
    width:100px; 
    height:100px;
    line-height:100px;
    margin-left:20px; 
    text-align:center;
    background-color:#66f; 
    -webkit-transform:scale(1.5, 1.5); 
    -moz-transform:scale(1.5, 1.5);
    transform:scale(1.5, 1.5);
}
/*说明：如果X,Y轴 缩放的倍数一致的话，也可以只写一个值，如：transform:scale(0.8);
也可以通过scaleX(<number>), scaleY(<number>)来分别设置X,Y轴的缩放情况*/

三、移动translate

/*元素的非变形属性省略不写*/
.translate-2{ /*向右偏移10px*/
    -webkit-transform:translate(10px); 
    -moz-transform:translate(10px); 
    transform:translate(10px);
}

.translate-3{ /*向上左各偏移10*/
    -webkit-transform:translate(-10px, -10px); 
    -moz-transform:translate(10px, -10px); 
    transform:translate(10px, -10px);
}
/*说明：translate属性与scale属性有所不同，如果只给一个值的话，默认第二个值为0
也可以通过translateX(<number>), translateY(<number>)来分别设置X,Y轴的移动情况*/

四、扭曲skew

.skew-1{ /*沿X方向扭曲30deg*/
    -webkit-transform:skew(30deg); 
    -moz-transform:skew(30deg); 
    transform:skew(30deg);
}
.skew-2{ /*沿Y方向扭曲10deg*/
    -webkit-transform:skew(0, 10deg);
    -moz-transform:skew(0,10deg); 
    transform:skew(0,10deg);
}
.skew-3{ /*沿X、Y方向分别扭曲30deg, 10deg*/
    -webkit-transform:skew(30deg, 10deg); 
    -moz-transform:skew(30deg, 10deg); 
    transform:skew(30deg, 10deg);
}