css3开发:2D变形功能总结

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_40283784/article/details/81132041

一、基本操作

1.旋转:

transform:rotate(顺时针旋转的度数);

2.缩放

transform:scale(水平方向缩放的比例,垂直方向缩放的比例);

3.倾斜

transform:skew(水平方向上倾斜的角度,垂直方向上倾斜的角度);

4.移动

transform:translate(水平方向上偏移的距离,垂直方向上偏移的距离);

5.matrxi方法把以上的方法合而为一,具体的方法如下所示:

transform:matrxi(顺时针旋转的度数,水平缩放的比例,垂直缩放的比例,水平方向顺时针倾斜的角度,水平方向便宜的角度,垂直方向偏移的角度);

例子:

div {

transform:matrix(0.866,0.5,-0.5,0.866,0,0);

-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */

-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */

}

值得注意的是,目前各大主流的浏览器还对css3的主流动画效果还没有达成一致的开发标准,所以需要处理他的兼容性问题。

比如处理移动:

.Div{

    各种属性

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

}

其他类似都要加上前缀。
 

二、多种变形操作

 

展开阅读全文

没有更多推荐了,返回首页