将一个DIV旋转的某一角度即90度/180度/270度及放大等问题

发布时间:2022-04-14 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了将一个DIV旋转的某一角度即90度/180度/270度及放大等问题脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

对前端是小白不过有个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度
下面IE滤镜 rotation 有4个值 0 1 2 3 ;0是不旋转 1=90度 2=180度 3=270度

实际使用发现,你放在style中不行,<DIV&nbsp;  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(sizingMethod='auto expand', M11=0.7660444431189777, M12=-0.6427876096865394, M21=0.6427876096865398, M22=0.7660444431189779)";

你可以尝试一下,这个是大约40多度的角度。

尝试之后瞬间觉得很强大,但是还有个大坑,那就是M11--M22哪里来的?

经过学习,
M11=cos(roation),M12=-sin(roation),M21=sin(roation),M22=cos(roation) roation就是你的角度喽,不过遗憾的是直接这样写不行的,你必须自己算出数字,这里附赠一个算三角函数的在线无网址:http://www.ab126.COM/geometric/1689.htML.

最后补充一下,DXImageTransform.Microsoft.Matrix可以让你的div放大缩小,只要将M11--M22放大或缩小对应倍数就行了,不过现在的屏看着有误差啊。

脚本宝典总结

以上是脚本宝典为你收集整理的将一个DIV旋转的某一角度即90度/180度/270度及放大等问题全部内容,希望文章能够帮你解决将一个DIV旋转的某一角度即90度/180度/270度及放大等问题所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签: