我们都知道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. BZOJ 2946 [Poi2000]公共串 ——后缀自动机

    任意选择一个串作为模式串,构建出后缀自动机. 然后用其他的串在后缀自动机上跑匹配. 然后就到了理解后缀自动机性质的时候. 在某一个节点的最大值是可以沿着parent树上传的. 然后用dp[i][j]表 ...

  2. 【双向bfs】2017多校训练十 HDU 6171 Admiral

    [题意] 现在给出一个三角矩阵,如果0编号的在点(x,y)的话,可以和(x+1,y),(x-1,y),(x+1,y+1),(x-1,y-1)这些点进行交换. 我们每一次只能对0点和其他点进行交换.问最 ...

  3. 【loj6191】「美团 CodeM 复赛」配对游戏

    题目 显然期望dp. 简单想法: f[i][j]表示前i个人中向右看并且没有被消除的人数的概率 如果第i+1个人是向右,$f[i+1][j+1]=f[i][j]/2$ 如果第i+1个人是向左,$f[i ...

  4. 【noip】noip201503求和（题解可能不完美，但绝对详细）

    3. 求和 难度级别:B: 运行时间限制:1000ms: 运行空间限制:51200KB: 代码长度限制:2000000B 题目描述   一条狭长的纸带被均匀划分出了n个格子,格子编号从1到n.每个格子 ...

  5. oracle的split函数

    PL/SQL 中没有split函数,需要自己写. 代码: create or replace type type_split as table of varchar2(50);  --创建一个 typ ...

  6. Oracle Partition 分区详细总结

    此文从以下几个方面来整理关于分区表的概念及操作:        1.表空间及分区表的概念        2.表分区的具体作用        3.表分区的优缺点        4.表分区的几种类型及操作 ...

  7. LA 3135 优先队列

    题目大意:有若干命令,它有两个属性Q_Num,Period(周期).按时间循序模拟前k个命令并输出他们的Q_Num,若同时发生输出Q_Num最小的值. #include<iostream> ...

  8. CKeditor如何实现图片上传功能

    http://makaiyuan.blog.51cto.com/5819595/1049521 如何在数据库中导入excel文件内的数据:http://jingyan.baidu.com/album/ ...

  9. (1)Swing创建窗体

    本系列使用Intellij IDEA 2017.3.4版本 一.运行窗体 1. 2. 3. 4. 5. 6. 给JPanel起个名字 -如From 7. 8. 9. 生成 import javax.s ...

  10. Python使用eval强制转换字符串为字典时报错：File "<string>", line 1, in <module> NameError: name 'nan' is not defined

    文本中保存的内容为: { 'QQQ': [0.067, 0.167, 0.2, 0.033, 0.233, 0.267, 0.1, 0.133], 'TTT': [0.5, 0.375, 0.25, ...