我们都知道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旋转问题的更多相关文章

  1. css transform旋转属性

    将以下代码复制到本地就可以看到效果: <!DOCTYPE html> <html lang="en"> <head> <meta char ...

  2. CSS之旋转立方体

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. css钻石旋转实现

    css钻石旋转实现: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &l ...

  4. Html CSS transform matrix3d 3D转场特效

    Html CSS transform matrix3d 3D转场特效 透视矩阵 2n/(r-l) 0 (r+l)/(r-l) 0 0 2n/(t-b) (t+b)/(t-b) 0 0 0 (n+f)/ ...

  5. CSS Transform完全指南 #flight.Archives007

    Title/ CSS Transform完全指南 #flight.Archives007 序: 第7天了! 终身学习, 坚持创作, 为生活埋下微小的信仰. 我是忘我思考,共同进步! 简介: 一篇最简约 ...

  6. CSS Transform完全指南(第二版) #flight.Archives007

    Title/ CSS Transform完全指南(第二版) #flight.Archives007 序: 第7天了! 终身学习, 坚持创作, 为生活埋下微小的信仰. 我是忘我思考,共同进步! 简介: ...

  7. css做旋转相册效果

    css做旋转相册效果 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &l ...

  8. No.3 - CSS transition 和 CSS transform 配合制作动画

    课程概述 作业提交截止时间:09-01 任务目的 深度理解掌握 transition-timing-function 以及它的意义 学会配合使用 CSS transform 和CSS transiti ...

  9. CSS Transform / Transition / Animation 属性的区别

    back21 Jun 2011 Category: tech Tags: css 最近想UI的动画转到css3能吃进3d加速的属性上面来以加强动画的连贯性.只是对于css几个新加的属性不太熟悉,常常容 ...

随机推荐

  1. mac 打开apach 但无法访问localhost的解决方法

    y由于mac系统默认自带了PHP和Apach, 所以可以通过 sudo apachectl start 直接启动apach服务, 此时在浏览器输入http://localhost,会出现It work ...

  2. ctype.h 第2章

    ctype.h ctype.h是c标准函数库中的头文件   定义了一批c语言字符分类函数   (c character classification functions) 用于测试字符是否属于特定的字 ...

  3. 【LeetCode】Maximum Subarray(最大子序和)

    这道题是LeetCode里的第53道题. 题目描述: 给定一个整数数组 nums ,找到一个具有最大和的连续子数组(子数组最少包含一个元素),返回其最大和. 示例: 输入: [-2,1,-3,4,-1 ...

  4. HDU-1532 Drainage Ditches，人生第一道网络流！

    Drainage Ditches 自己拉的专题里面没有这题,网上找博客学习网络流的时候看到闯亮学长的博客然后看到这个网络流入门题!随手一敲WA了几发看讨论区才发现坑点! 本题采用的是Edmonds-K ...

  5. tomcat的安装和优化二

    JAVA应用服务器weblogicwebsphere tomcat resin(百度,去哪网,搜狗,人人,互动百科)jboss resin官网:www.caucho.com jvm的调优: 1 JAM ...

  6. （转）iOS字体

    一.iOS原生字体展示 在 label中选择字体的font,并把font由system改成custom后,就能在family中看到72种特殊字体.这些里面就有很炫的字体,但 是全部是只针对英文数字,对 ...

  7. SPOJ GSS3 Can you answer these queries III ——线段树

    [题目分析] GSS1的基础上增加修改操作. 同理线段树即可,多写一个函数就好了. [代码] #include <cstdio> #include <cstring> #inc ...

  8. BZOJ 2431: [HAOI2009]逆序对数列【dp】

    Description 对于一个数列{ai},如果有i<j且ai>aj,那么我们称ai与aj为一对逆序对数.若对于任意一个由1~n自然数组成的数列,可以很容易求出有多少个逆序对数.那么逆序 ...

  9. leetcode 376

    利用贪心思想,每次都得到到当前数最长的长度,和与当前数链接的前一个数之间差的符号 class Solution { public: int wiggleMaxLength(vector<int& ...

  10. ElasticSearch API 之 UPDATE

    ES本身是一个倾向于查询检索的框架,对于更新的操作,太过频繁总归不好的. 阅读本篇后,你可以使用Script对所有的文档执行更新操作,也可以使用doc对部分文档执行更新,也可以使用upsert对不存在 ...