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

最新推荐文章于 2024-07-04 09:37:48 发布

想要成为编码机器人

最新推荐文章于 2024-07-04 09:37:48 发布

阅读量7.8k

点赞数 1

我们在试用jquery获取样式的时候是通过$('element').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>

亲测有效，但是在最后获取的角度有正负的区别，亲可以根据自己的需求做相应的调整。

文章出自：https://www.cnblogs.com/qwguo/p/6678830.html