CSS3 2D转换

逃跑的火焰

2D转换方法分为以下5种： 1.位移 translate()  2.旋转 rotate()  3.缩放 rotate()  4.倾斜 skew()  5.矩阵 matrix()

1.translate(50px, 100px)，根据给定的参数，从当前位置进行移动（x轴移动距离，y轴移动距离）

[CSS] 纯文本查看 复制代码

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

2.rorate(30deg); 顺时针旋转指定的度数，如果参数为负，代表逆时针旋转

[CSS] 纯文本查看 复制代码

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

3.scale(2,3); 宽(x轴)和高(y轴)变为指定倍数

[CSS] 纯文本查看 复制代码

div{
    -ms-transform:scale(2,3); /* IE 9 */
    -webkit-transform: scale(2,3); /* Safari */
    transform: scale(2,3); /* 标准语法 */  
}

4.skew(); 在x轴和y轴上倾斜的角度

[CSS] 纯文本查看 复制代码

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

5.matrix(); 矩阵有6个参数，分别代表（宽度的缩放倍数，Y轴的倾斜幅度， X轴的倾斜幅度，高度的缩放倍数，x轴的位移， y轴的位移）