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

巴特西

CSS transform旋转问题

最新文章

热门文章