JS获取transform rotate旋转角度的度数,matrix解析
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JS获取transform rotate旋转角度的度数,matrix解析相关的知识,希望对你有一定的参考价值。
参考技术A 转自 竹音林 ,只为自己笔记,以备不时之需如果使用 $(objName).css('transform') 来获取CSS3里transform rotate旋转角度的度数,得到的是矩阵 matrix(a,b,c,d,e,f)
看到这个矩阵,很多人都是一脸蒙蔽的
那么想获取rotate的角度怎么办,看看我抄来的大作:)
(一脸严肃)
还有一个百度来的~~
javascript如何实现图片任意角度的旋转?
如题。。。3Q!
可以用JAvascript改变这个图片的css来旋转他:这个是css代码:
img
transform:rotate(7deg);
-ms-transform:rotate(7deg); /* IE 9 */
-moz-transform:rotate(7deg); /* Firefox */
-webkit-transform:rotate(7deg); /* Safari 和 Chrome */
-o-transform:rotate(7deg); /* Opera */
在JAvascript里面可以先获取到这张图片 设置图片id = "box"
var img = document.getElementById('box'); 获取到这个图片并用变量记住
img.style.transform = "rotate(90deg)"; 改变这个图片的css,旋转90度
完毕!!! 参考技术A 这个如果没有对低版本浏览器兼容的要求的话,可以使用CSS3来实现,现在主流的浏览器都已支持
// 旋转60度
-moz-transform:rotate(60deg);
-webkit-transform:rotate(60deg);
transform:rotate(60deg);追问
那个。。。我说的是javascript。。。。。
3Q、
CSS都告诉你了,你就可以使用JS来改变样式了啊.... 好吧,送佛送到西,JS如下:
div.style.MozTransform = "rotate(60deg)";div.style.WebkitTransform = "rotate(60deg)";
div.style.transform = "rotate(60deg)";追问
不用css3实现不了吗??
而且你上面的代码在ie8.0下没效果。。火狐有效果。。
IE8不能通过CSS3实现旋转,只能通过滤镜。
这里有简单的介绍:
http://www.iefans.net/css3-transform-ie/
微软的官方文档:
http://msdn.microsoft.com/en-us/library/ms533014(v=vs.85).aspx
我这里没有真正的IE8,试不了,在通过IE11调整为IE8内核测试时没起作用
如果不用css3能实现旋转效果吗。。3Q!
追答至少我没用过其他的方式,也没看到过相关的资料。
本回答被提问者采纳 参考技术B 用html5 canvas里有个rotate方法以上是关于JS获取transform rotate旋转角度的度数,matrix解析的主要内容,如果未能解决你的问题,请参考以下文章