CSS3 2D转换

时间 2019-11-26

标签 css3 css 2d 转换栏目 CSS 繁體版

原文原文链接

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

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

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

2.rorate(30deg); 顺时针旋转指定的度数，若是参数为负，表明逆时针旋转code

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

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

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

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

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轴位移）it