我们都知道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. Exchange 邮件服务器内存硬盘估算

  2. java中传入一个数或字符串或数组进行反转

    //将一个数用递归反转--利用余数 public static void inverse(int n) { System.out.print(n % 10); if (n >= 10) inve ...

  3. 【bzoj4519】[Cqoi2016]不同的最小割 分治+最小割

    题目描述 学过图论的同学都知道最小割的概念:对于一个图,某个对图中结点的划分将图中所有结点分成两个部分,如果结点s,t不在同一个部分中,则称这个划分是关于s,t的割.对于带权图来说,将所有顶点处在不同 ...

  4. 刷题总结——过河（NOIP2015）

    题目: 题目背景 NOIP2005提高组试题2. 题目描述 在河上有一座独木桥,一只青蛙想沿着独木桥从河的一侧跳到另一侧.在桥上有一些石子,青蛙很讨厌踩在这些石子上.由于桥的长度和青蛙一次跳过的距离都 ...

  5. 算法复习——欧拉函数（poj3090）

    题目: Description A lattice point (x, y) in the first quadrant (x and y are integers greater than or e ...

  6. ⑨要写信（codevs 1697）

    题目描述 Description 琪露诺(冰之妖精)有操控冷气的能力.能瞬间冻结小东西,比普通的妖精更危险.一直在释放冷气的她周围总是非常寒冷. 由于以下三点原因…… 琪露诺的符卡 冰符“Icicle ...

  7. C++练习，计算间隔天数

    time_t time(time_t *time) 从1970年1月1日到到现在的秒数,如果系统时间不存在,返回1char *ctime(const time_t *time) 返回以:day mon ...

  8. JS实现限行

    一.JS代码实现 1. 机动车辆限行如下图所示: 具体详情请访问:http://www.bjjtgl.gov.cn/zhuanti/10weihao/index.html 2.JS代码实现 <! ...

  9. Python练习题–持续更新

    1.你是一个高级测试工程师,现在要做性能测试,需要你写一个函数,批量生成一些注册使用的账号. 产生的账号是以@163.com结尾,长度由用户输入,产生多少条也由用户输入,用户名不能重复,用户名必须由大 ...

  10. P1540 机器翻译（STL 链表）

    题目背景 小晨的电脑上安装了一个机器翻译软件,他经常用这个软件来翻译英语文章. 题目描述 这个翻译软件的原理很简单,它只是从头到尾,依次将每个英文单词用对应的中文含义来替换.对于每个英文单词,软件会先 ...