原本的效果是想图片每次在已有的基础上叠加旋转,但是踩了两个坑,下面写讲述正确的做法
1.如果是直接写在css中的transfrom transform:rotate(120deg)
利用jquery获取
$('#aa').css('transform') ,返回的值为 matrix(a,b,c,d,e,f) 为一个矩阵函数,需要利用方法进行获取确切的值,但是具体矩阵每个数据是什么,还没有进行深究,lijiayouyj@163.com采用了这位大佬的的解析矩阵的方法加以利用
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修改的属性,是修改的内联样式的属性 ,因为在上诉方法中,修改了值,如果用第一种方法时不能获取到修改旋转之后的值的