我们都知道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. [转]python 多线程threading简单分析

    多线程和多进程是什么自行google补脑 对于python 多线程的理解,我花了很长时间,搜索的大部份文章都不够通俗易懂.所以,这里力图用简单的例子,让你对多线程有个初步的认识. 单线程 在好些年前的 ...

  2. 【Android】自定义Dialog

    先上图 main.xml主界面文件 <?xml version="1.0" encoding="utf-8"?><LinearLayout x ...

  3. window.location.href跳转问题

    任务中遇到这样一个问题,用window.location.href跳转一到个网址,但是每次都出错,显示网址前面加上了文件所在文件夹的路径 示例如下: window.location.href=&quo ...

  4. [luoguP4035] [JSOI2008]球形空间产生器（高斯消元）

    传送门 设球心的坐标为未知量 用最后一个点来表示球面到球心的距离,那么它和前n个式子相等 移项乱搞 最后高斯消元 #include <cmath> #include <cstdio& ...

  5. C 语言中可以调用命令行指令的 system（）函数

    C语言有一个system函数(在<stdlib.h>头中,C++则为<cstdlib>头),可以用来调用终端命令.原型如下: int system(const char *cm ...

  6. idea打包SpringBoot项目打包成jar包和war

    - 打包成jar包 1. <groupId>com.squpt.springboot</groupId> <artifactId>springbootdemo< ...

  7. hdu 4951

    Multiplication table Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Oth ...

  8. NOJ 1116 哈罗哈的大披萨 【淡蓝】 [状压dp+各种优化]

    我只能说,珍爱生命,远离卡常数的题...感谢陈老师和蔡神,没有他们,,,我调一个星期都弄不出来,,,, 哈罗哈的大披萨 [淡蓝] 时间限制(普通/Java) : 1000 MS/ 3000 MS   ...

  9. npm start 修改启动端口的不同方式

    antd的启动配置文件基于package.json文件,配合roadhog使用时,启动配置是: "scripts": { "start": "road ...

  10. 王垠 ：写给支持和反对《完全用Linux工作》的人们 （ 2004/8/26）

    在一阵阵唾骂和欢呼声中,<完全用linux工作>被转载到了天涯海角.很多人支持我,也有很多人唾骂我.我不知道它是怎样流传到那么多地方,其实 我不知道它都被转到哪里去了…… 我知道现在这篇文 ...