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解析的主要内容,如果未能解决你的问题,请参考以下文章

用js怎么获取css3里的rotate

javascript如何实现图片任意角度的旋转?

js设置图片随机旋转角度

Unity获取物体旋转角度怎么计算?

网页元素--角度

在U3D中 怎么获得模型旋转的角度的值?