我們都知道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;width: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)會取到的角度不完整，不過通常的使用是不會用到這么多次點擊啦！