CSS transform旋转问题

我们都知道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)会取到的角度不完整，不过通常的使用是不会用到这么多次点击啦！

posted @ 2017-09-25 13:56  清风·流云  阅读(2125)  评论(0)    收藏  举报