获取css的transform的rotate的值

原本的效果是想图片每次在已有的基础上叠加旋转，但是踩了两个坑，下面写讲述正确的做法

1.如果是直接写在css中的transfrom    transform:rotate(120deg)

    利用jquery获取

           $('#aa').css('transform') ，返回的值为 matrix(a,b,c,d,e,f)   为一个矩阵函数，需要利用方法进行获取确切的值，但是具体矩阵每个数据是什么，还没有进行深究，[email protected]采用了这位大佬的的解析矩阵的方法加以利用

 

        let translateYFront = $('.warp-front').eq(indexId).css('transform')
        //translateYFront  为一个matrix(a,b,c,d,e,f)
        let alls = translateYFront.replace(/[^0-9\-,]/g, '')
        //进行拆分获取确切的某个值
        let arr = alls.split(',')
        let a = arr[0]
        let b = arr[1]
        let c = arr[2]
        let d = arr[3]
        let aa = Math.round(180 * Math.asin(a) / Math.PI)
        let bb = Math.round(180 * Math.acos(b) / Math.PI)
        let cc = Math.round(180 * Math.asin(c) / Math.PI)
        let dd = Math.round(180 * Math.acos(d) / Math.PI)
        let deg = 0
        if (aa === bb || -aa === bb) {
          deg = dd
        } else if (-aa + bb === 180) {
          deg = 180 + cc
        } else if (aa + bb === 180) {
          deg = 360 - cc || 360 - dd
        }
        deg = deg >= 360 ? 0 : deg  //deg为最终解析的度数
        let step = 360
        //进行度数的改变
        $('.warp-front').eq(indexId).css('transform', 'rotateY(' + (deg + step) + 'deg)')

 

2.内联样式中的 style = "transform：rotate(120deg) "

     内联样式中获取的方法不一样，el.style.transform 获取，返回的不再是一个martrix是直接的rotate(120deg),要获取值，直接就拆分字符串就行了，简单很多

let wrapfront = document.getElementsByClassName('warp-front')
let translateYFront = wrapfront[indexId].style.transform 
let number = parseInt(translateYFront.slice(8, translateYFront.length - 4))
let step = 360
$('.warp-front').eq(indexId).css('transform', 'rotateY(' + (number + step) + 'deg)')

 

 

讲讲项目中遇到的坑

（1）jquery获取($.classname)返回的是对象

通过class得到元素，用jquery获取($.classname)返回的不是一个数组，而是一个对象，一次获取其中的某一个应该为

       ($.classname).eq(index),而不是($.classname)[index]

（2）jquery通过css修改的属性，是修改的内联样式的属性 ，因为在上诉方法中，修改了值，如果用第一种方法时不能获取到修改旋转之后的值的