• 通过js获取元素css3的transform rotate旋转角度方法


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

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

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 
     4 <head>
     5     <meta charset="UTF-8">
     6     <title>Document</title>
     7 </head>
     8 <style>
     9     #divTransform {
    10         margin: 30px;
    11         width: 200px;
    12         height: 100px;
    13         background-color: yellow;
    14         /* Rotate div */
    15         transform: rotate(9deg);
    16         -ms-transform: rotate(9deg);
    17         /* Internet Explorer */
    18         -moz-transform: rotate(9deg);
    19         /* Firefox */
    20         -webkit-transform: rotate(9deg);
    21         /* Safari 和 Chrome */
    22         -o-transform: rotate(9deg);
    23         /* Opera */
    24     }
    25 </style>
    26 
    27 <body>
    28 <div id="divTransform">
    29 </div>
    30 </body>
    31 <script>
    32     var el = document.getElementById("divTransform");
    33     var st = window.getComputedStyle(el, null);
    34     var tr = st.getPropertyValue("-webkit-transform") ||
    35         st.getPropertyValue("-moz-transform") ||
    36         st.getPropertyValue("-ms-transform") ||
    37         st.getPropertyValue("-o-transform") ||
    38         st.getPropertyValue("transform") ||
    39         "FAIL";
    40     // With rotate(30deg)...
    41     // matrix(0.866025, 0.5, -0.5, 0.866025, 0px, 0px)
    42     console.log('Matrix: ' + tr);
    43     // rotation matrix - http://en.wikipedia.org/wiki/Rotation_matrix
    44     var values = tr.split('(')[1].split(')')[0].split(',');
    45     var a = values[0];
    46     var b = values[1];
    47     var c = values[2];
    48     var d = values[3];
    49     var scale = Math.sqrt(a * a + b * b);
    50     console.log('Scale: ' + scale);
    51     // arc sin, convert from radians to degrees, round
    52     var sin = b / scale;
    53     // next line works for 30deg but not 130deg (returns 50);
    54     // var angle = Math.round(Math.asin(sin) * (180/Math.PI));
    55     var angle = Math.round(Math.atan2(b, a) * (180 / Math.PI));
    56     console.log('Rotate: ' + angle + 'deg');
    57 </script>
    58 
    59 </html>
     

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

     
  • 相关阅读:
    chrome插件收集
    每日进步一点点:偏函数的学习使用
    每日进步一点点:实现python的函数重载【打破相同函数名会被覆盖】
    stylus、scss的for和if写法对比
    MAC下JDK随意切换
    ssh设置超时时间
    kafkaTool工具使用
    kafka性能测试
    linx内存网络监控
    Mobaxterm使用
  • 原文地址:https://www.cnblogs.com/qwguo/p/6678830.html
Copyright © 2020-2023  润新知