CSS3 2D轉換

2D轉換方法分爲如下5種： 1.位移 translate()  2.旋轉 rotate()  3.縮放 rotate()  4.傾斜 skew()  5.矩陣 matrix()

1.translate(50px, 100px)，根據給定的參數，從當前位置進行移動（x軸移動距離，y軸移動距離）

div{
　　transform: translate(50px,100px);
　　-ms-transform: translate(50px,100px); /* IE 9 */
　　-webkit-transform: translate(50px,100px); /* Safari and Chrome */
}

2.rorate(30deg); 順時針旋轉指定的度數，若是參數爲負，表明逆時針旋轉

div{
    transform: rotate(30deg);
    -ms-transform: rotate(30deg); /* IE 9 */
    -webkit-transform: rotate(30deg); /* Safari and Chrome */
}

3.scale(2,3); 寬(x軸)和高(y軸)變爲指定倍數

div{
    -ms-transform:scale(2,3); /* IE 9 */
    -webkit-transform: scale(2,3); /* Safari */
    transform: scale(2,3); /* 標準語法 */  
}

4.skew(); 在x軸和y軸上傾斜的角度

div{
    transform: skew(30deg,20deg);
    -ms-transform: skew(30deg,20deg); /* IE 9 */
    -webkit-transform: skew(30deg,20deg); /* Safari and Chrome */
}

5.matrix(); 矩陣有6個參數，分別表明（在x軸傾斜，寬的縮放倍數， 高的縮放倍數，y軸傾斜，x軸位移， y軸位移）