我们都知道css的transform可以让旋转多少角度：transform：rotate(90deg)，但是设置后只能旋转一次，如何想让它一直旋转下去怎么办？一种是使用matrix属性获取当前transform属性，然后通过转换成角度传入rotate，我比较喜欢偷懒所以就通过字符拼接的方法，来获取旋转角度变量。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="xz" style="background-color: blue;height: 50px;50px" onclick="xuanzhuan()">旋转</div>
<script type="text/javascript">
var lastDeg = 0
function xuanzhuan () {
const refreshBtn = document.getElementById('xz')
refreshBtn.style.transform = 'rotate(' + (lastDeg + 360) + 'deg)'
refreshBtn.style.transition = 'transform 1s'
var currenDeg = refreshBtn.style.transform
var crnDeg = new Array(20)
crnDeg = currenDeg.split('')
var stCrnDeg = crnDeg.splice(7, 10)
stCrnDeg.pop()
stCrnDeg.pop()
stCrnDeg.pop()
stCrnDeg.pop()
var enDeg = stCrnDeg.join('')
lastDeg = parseInt(enDeg)
}
</script>
</body>
</html>
需要注意的是当获取变量lastDeg后，如何传入字符串中，‘+lastDeg+’这样lastDeg就是一个变量值传入。当然当点击次数变多后上面的splice(7, 10)会取到的角度不完整，不过通常的使用是不会用到这么多次点击啦！