javascript - svg 地图 matrix 旋转90 ，计算公式?

Question

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

Answer 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#/