JS获取transform rotate旋转角度的度数，matrix解析

Posted 2023-03-09

参考技术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方法