网站地图    收藏   

主页 > 前端 > javascript >

js实现css3 transform matrix矩阵的使用

来源:未知    时间:2020-03-30 10:59 作者:小飞侠 阅读:

[导读] js实现css3 transform matrix矩阵的使用Transform 执行顺序问题 — 后写先执行 matrix(a,b,c,d,e,f) 矩阵函数 •通过矩阵实现缩放 x轴缩放 a=x*a c=x*c e=x*e; y轴缩放 b=y*b d=y*d f=y*f; •通过矩阵实现位移...

js实现css3 transform matrix矩阵的使用Transform 执行顺序问题 — 后写先执行

matrix(a,b,c,d,e,f) 矩阵函数

image.png

•通过矩阵实现缩放

x轴缩放 a=x*a    c=x*c     e=x*e;

y轴缩放 b=y*b   d=y*d     f=y*f;

 

•通过矩阵实现位移

x轴位移: e=e+x

y轴位移: f=f+y

 

•通过矩阵实现倾斜

x轴倾斜: c=Math.tan(xDeg/180*Math.PI)

y轴倾斜: b=Math.tan(yDeg/180*Math.PI)

 

matrix(a,b,c,d,e,f) 矩阵函数

•通过矩阵实现旋转

a=Math.cos(deg/180*Math.PI);

b=Math.sin(deg/180*Math.PI);

c=-Math.sin(deg/180*Math.PI);

d=Math.cos(deg/180*Math.PI);

 

变换兼容IE9以下IE版本只能通过矩阵来实现

filter: progid:DXImageTransform.Microsoft.Matrix( M11= 1, M12= 0, M21= 0 , M22=1,SizingMethod='auto expand');

IE下的矩阵没有E和F两个参数 M11==a; M12==c; M21==b; M22==d

以上就是js实现css3 transform matrix矩阵的使用全部教程,感谢大家支持自学php网。

自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

添加评论