将一个DIV旋转的某一角度即90度/180度/270度及放大
网站建设 2023-01-28 21:39www.1681989.com免费网站
对前端是小白，不过有个gis系统的问题必须要借助点前端技术了，所以临时抱佛脚，发现这个解决问题思路，虽然不完全算前端问题，还是记录下来，说不定对谁有帮助。
是90度，180度，270度的旋转，代码如下
复制代码
代码如下:-webkit-transform: rotate(90deg);/Safari 4+,Google Chrome 1+ /
-moz-transform: rotate(90deg);/Firefox 3.5+/
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);/ie/
上面2个都好理解 90度
狼蚁网站SEO优化IE滤镜 rotation 有4个值 0 1 2 3 ；0是不旋转 1=90度 2=180度 3=270度
实际使用发现，你放在style中不行，<DIV ID= "oDiv " STYLE= "width:100%;filter:progid:DXImageTransform.Microsoft.BasicImage( Rotation=1); ">
这样没效果，必须放在css声明中。如
复制代码
代码如下:#example {
transform: rotate(40deg);
-o-transform: rotate(40deg);
-webkit-transform: rotate(40deg);
-moz-transform: rotate(40deg);
filter:progid:DXImageTransform.Microsoft.BasicImage(Rotation=2);
}
呢，其实你看到了，(40deg);也就是说除了ie角度你随便写就行了。而IE的角度任意角度就比较麻烦，要用ie矩阵滤镜，代码如下
复制代码
代码如下:filter: progid:DXImageTransform.Microsoft.Matrix(sizgMethod='auto expand', M11=0.7660444431189777, M12=-0.6427876096865394, M21=0.6427876096865398, M22=0.7660444431189779)";
你可以尝试一下，这个是大约40多度的角度。
尝试之后瞬间觉得很强大，还有个大坑，那就是M11--M22哪里来的？
经过学习，
M11=cos(roation),M12=-s(roation),M21=s(roation),M22=cos(roation) roation就是你的角度喽，不过遗憾的是直接这样写不行的，你必须自己算出数字，这里附赠一个算三角函数的在线无网址http://.ab126./geometric/1689.html.
补充一下，DXImageTransform.Microsoft.Matrix可以让你的div放大缩小，只要将M11--M22放大或缩小对应倍数就行了，不过现在的宽屏看着有误差啊。