svg 地图 matrix 旋转90 ,计算公式?

新手上路,请多包涵

图片描述

图片描述

问一下,把matrix 以坐标点1090,870 旋转90度, 计算公式?

阅读 6k
1 个回答

你可以通过CSS3的样式去变换你的地图

如果想使用矩阵变换函数,结果如下
矩阵变换公式, 当然如果要达到以某个点旋转多少度的公式,这个你就得自己推导了。

 matrix(1,0,0,1,0,0)
 matrix(a,b,c,d,e,f)

 //矩阵实现位移(disX和disY为偏移量)
 x位移: e = e + disX;
 y位移: f = f + disY;

 //矩阵实现缩放(x,y为缩放倍数)
 x轴缩放: a = x*a; c=x*c;  e=x*e;
 y轴缩放: b = y*b; d=y*d;  f=y*f;

 //矩阵实现扭曲(xDeg,yDeg为扭曲角度)
 c = Math.tan(xDeg/180*Math.PI);
 b = Math.tan(yDeg/180*Math.PI);

 //矩阵实现旋转(deg为旋转角度)
 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);
transform: matrix(Math.cos(90/180*Math.PI),Math.sin(90/180*Math.PI),-Math.sin(90/180*Math.PI),Math.cos(90/180*Math.PI),0,0);
transform-origin: 1090px, 870px;

如果使用rotate函数写法比较简单(推荐这个吧)

transform: rotate(90deg);
transform-origin: 1090px, 870px;

关于CSS3的transform
http://jsfiddle.net/hjzheng/UjuT5/2/

更多资料
http://get-set.cn/CUF_PPTs/CSS3-2D-Transform.html#/

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题