今天小编跟大家讲解下有关将一个DIV旋转的某一角度即90度/180度/270度及放大等问题 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关将一个DIV旋转的某一角度即90度/180度/270度及放大等问题 的相关资料,希望小伙伴们看了有所帮助。
对前端是小白 不过有个gis系统的问题必须要借助点前端技术了 所以临时抱佛脚 发现这个解决问题思路 虽然不完全算前端问题 还是记录下来 说不定对谁有帮助。
首先是90度 180度 270度的旋转 代码如下:复制代码代码如下:-webkit-transform: rotate(90deg);-moz-transform: rotate(90deg);filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);上面2个都好理解 90度下面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(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放大或缩小对应倍数就行了 不过现在的宽屏看着有误差啊。
来源:爱蒂网