我们再试用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. NoSql研究报告

    NoSql研究报告 1.概述 随着互联网的不断发展,信息系统的数据变得越来越多,关系型数据库逐渐面临着难以克服的障碍,主要体现在: 对数据库的高并发读写需求 对海量数据的高效率存储和访问需求 对数据库 ...

  2. 百度编辑器 UEditor第一次加载后台数据失败

    给编辑器赋值的代码: var ue = UE.getEditor('content'); ue.ready(function (){      ue.setContent(data.data.cont ...

  3. 前端资讯周报 2.27 - 3.5: 如何设计一个优秀的HTML接口，深入理解line-height

    从本周起,每周一我都会分享上一周我订阅的技术站点中,和解决问题的过程中阅读到的值得分享的文章,或者视频教程,又或者图书. 个人认为国外的技术文章质量较高,而且发布的技术资讯也走在行业前沿,所以比较关注 ...

  4. solr6.4.1搜索引擎同步mysql数据库

    尚未成功启动solr的,请参考我的另一篇文章:http://www.cnblogs.com/zhuwenjoyce/p/6506359.html(solr6.4.1 搜索引擎启动eclipse启动) ...

  5. Swashbuckle Swagger组件扩展

      用Swagger有一段时间, 我的model层是一个单独的dll 但给Swagger配置的是api层dll的XML. 所以就导致了model字段的注释不能够反应到参数说明. 所以我fork了一份 ...

  6. BOM基础（二）

    跟DOM一样,BOM其实也是由很多的API组成. 不过对于BOM来说,最痛苦的不是不记得API,而是明明记得这个这个API,却没有考虑到它的兼容性. 之前的文章中讲到了offset系列的属性,他的宽高 ...

  7. [HDU]1016 DFS入门题

    题目的意思就是在1到n的所有序列之间,找出所有相邻的数相加是素数的序列.Ps:题目是环,所以头和尾也要算哦~ 典型的dfs,然后剪枝. 这题目有意思的就是用java跑回在tle的边缘,第一次提交就tl ...

  8. 常见的html面试题

    1.doctype作用?标准模式和兼容模式各有什么区别? (1).<doctype>声明位于文档第一行,在<html>标签之前.用于告知浏览器的解析器以什么样的标准解析该文档. ...

  9. 用C++11实现C++17的apply（动态数组用作函数参数）

    标题有点错误,apply是用tuple做参数,调用一个函数.这个标题是为了能更好的适配搜索关键字. 动态数组用作函数参数更适合嵌入了脚本环境的C++程序,比如lua或javascript(js). 若 ...

  10. wemall app商城源码机器人检测

    wemall-mobile是基于WeMall的Android app商城,只需要在原商城目录下上传接口文件即可完成服务端的配置,客户端可定制修改.本文分享wemall app商城源码Android之 ...