我们再试用jquery获取样式的时候是通过$('domName').css('transform')；的方式来获取元素的css样式，但是通过它获取到的css3的transform属性是以矩阵的方式呈现的：matrix(a, b, c, d, e, f);这样的返回值并不是我们想要的结果。

我们要想获取真正的旋转角度值就需要通过一系列的处理来过去，具体方法是：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

 </head>

 <style>

     #divTransform {

         margin: 30px;

         width: 200px;

         height: 100px;

         background-color: yellow;

         /* Rotate div */

         transform: rotate(9deg);

         -ms-transform: rotate(9deg);

         /* Internet Explorer */

         -moz-transform: rotate(9deg);

         /* Firefox */

         -webkit-transform: rotate(9deg);

         /* Safari 和 Chrome */

         -o-transform: rotate(9deg);

         /* Opera */

     }

 </style>

 <body>

 <div id="divTransform">

 </div>

 </body>

 <script>

     var el = document.getElementById("divTransform");

     var st = window.getComputedStyle(el, null);

     var tr = st.getPropertyValue("-webkit-transform") ||

         st.getPropertyValue("-moz-transform") ||

         st.getPropertyValue("-ms-transform") ||

         st.getPropertyValue("-o-transform") ||

         st.getPropertyValue("transform") ||

         "FAIL";

     // With rotate(30deg)...

     // matrix(0.866025, 0.5, -0.5, 0.866025, 0px, 0px)

     console.log('Matrix: ' + tr);

     // rotation matrix - http://en.wikipedia.org/wiki/Rotation_matrix

     var values = tr.split('(')[1].split(')')[0].split(',');

     var a = values[0];

     var b = values[1];

     var c = values[2];

     var d = values[3];

     var scale = Math.sqrt(a * a + b * b);

     console.log('Scale: ' + scale);

     // arc sin, convert from radians to degrees, round

     var sin = b / scale;

     // next line works for 30deg but not 130deg (returns 50);

     // var angle = Math.round(Math.asin(sin) * (180/Math.PI));

     var angle = Math.round(Math.atan2(b, a) * (180 / Math.PI));

     console.log('Rotate: ' + angle + 'deg');

 </script>

 </html>
 

这个方法是国外的牛人写的，记录下来。

 

通过js获取元素css3的transform rotate旋转角度方法的更多相关文章

  1. 原生js获取元素非行内样式属性的方法

    获取当前对象的样式DOM标准中的全局方法 getComputedStyle(obj).width (获取元素的宽度),但在非标准IE浏览器(IE8)以下有兼容问题IE8以下要这样写 obj.curre ...

  2. 【全面总结】js获取元素位置大小

    [js获取元素位置+元素大小]全面总结 目录 1.关于offset offsetParent(只读) offsetTop(只读) offsetLeft(只读) offsetHeight(只读) off ...

  3. js获取元素位置和style的兼容性写法

    今天说一下js获取元素位置和style的方法.当然不只是element.style那么简单.. 主角:getBoundingClientRect,getClientRects,getComputedS ...

  4. js获取元素提示信息

    js获取元素提示信息 var date=$("#date").attr('placeholder'); js修改元素的提示信息 $("#date").attr( ...

  5. JS获取元素宽高的两种情况

    JS获取元素宽高分两种情况, 一.内联样式,也就是直接把width和height写在HTML元素中的style里: 这种情况使用     document.getElementById('xxx'). ...

  6. js获取元素显示隐藏的当前状态

    js获取元素显示隐藏的当前状态 // CSS var display = $("."+cls).css("display"); if(display == &q ...

  7. js获取元素的外链样式

    一般给元素设置行内样式,如<div id="div1" style="width:500px;"></div>.如要获取它的样式,即可d ...

  8. 原生js获取元素的样式信息

    工作中经常会需要获取DOM元素的样式,之前都是通过jquery的css()方法,现在总结一下通过原生js获取元素样式的方法. obj.style js var _width = obj.style.w ...

  9. js 获取元素坐标 和鼠标点击坐标

    js 获取元素的位置 var odiv=document.getElementById('divid'); alert(odiv.getBoundingClientRect().left); aler ...

随机推荐

  1. [翻译]现代java开发指南 第二部分

    现代java开发指南 第二部分 第二部分:部署.监控 & 管理,性能分析和基准测试 第一部分,第二部分 =================== 欢迎来到现代 Java 开发指南第二部分.在第一 ...

  2. linux下zookeeper 配置参数

    -----------zookeeper 配置文件 clientPort ---服务的监听端口dataDir ---用于存放内存数据库快照的文件夹,同时用于集群的myid文件也存在这个文件夹里 (注意 ...

  3. 每天一个Linux命令（14）--head命令

    head 与 tail 就像它的名字一样的浅显易懂,它是用来显示开头或结尾某个数量的文字区块,head 用来显示档案的开头至标准输出中,而 tail 想当然的就是查看档案的结尾啦. 1.命令格式: h ...

  4. 为效率而生:开源Mac版Google Authenticator认证客户端GoldenPassport

    最近运维同学为了提高安全性,用Google Authenticator对服务器加了双重认证,此后登录服务器需要先输入动态密码,在输入服务器密码.Google Authenticator相当于软toke ...

  5. HTML 5入门知识（五）

    本地存储Web Storage 使用HTML 5的Web Storage功能,可以在客户端存储更多的数据,而且可以实现数据在多个页面中共享甚至是同步. cookie存储数据的不足 cookie可用于在 ...

  6. Java数据结构之Set学习总结

    前言: 前面介绍了Java的数据结构List.Map,今天抽空学习总结一下另一种数据结构Set. Set介绍 Set相对于List.Map是最简单的一种集合.集合中的对象不按特定的方式排序,并且没有重 ...

  7. VueJs学习路线

    对于这个东西,我本人也是初学者,收集一些学习资源的链接,用于个人资源的学习,也分享给大家 lavyun的博客 里面有一些给初学者的建议,学习路线 http://www.cnblogs.com/smar ...

  8. 有关rip路由协议相关知识以及实例配置【第1部分】

    有关rip路由协议相关知识以及实例配置[第一部分] RIP呢,这是一个比较重要的知识点,所以它的知识覆盖面很广泛:但是呢,我将会对碰到的问题进行一些分析解刨(主要是为了帮助自己理清思维):也希望能够从 ...

  9. IE10去掉input的type=”text”输入内容时出现的小叉号（X）和type=”password”出现的小眼睛图标

    最近在做一个后台管理系统项目,遇到以下两个问题: 1.从IE 10开始,type="text" 的 input 在用户输入内容后,会自动产生一个小叉号(X),方便用户点击清除已经输 ...

  10. 基于Spring Cloud和Netflix OSS构建微服务，Part 2

    在上一篇文章中,我们已使用Spring Cloud和Netflix OSS中的核心组件,如Eureka.Ribbon和Zuul,部分实现了操作模型(operations model),允许单独部署的微 ...