某些场景需要读取 css3 transform的属性

例如 transform:translate(10px,10px) rotate(-45deg);

这该怎么读取呢,正则表达式?毫无疑问这很坑爹

试试浏览器getComputedStyle得到的style对象中有没有这些属性,得到的只有matrix(0.866025, 0.5, -0.5, 0.866025, 0px, 0px) 这种格式

没有tranlate和rotate这些细节,但是所有的transform都可以在matrix数据里运算出来,

下面是代码

var values = tr.split('(')[1].split(')')[0].split(',');
var a = values[0];
var b = values[1];
var c = values[2];
var d = values[3];

var scale = Math.sqrt(a*a + b*b);

console.log('Scale: ' + scale);

// arc sin, convert from radians to degrees, round
var sin = b/scale;
// next line works for 30deg but not 130deg (returns 50);
// var angle = Math.round(Math.asin(sin) * (180/Math.PI));
var angle = Math.round(Math.atan2(b, a) * (180/Math.PI));

console.log('Rotate: ' + angle + 'deg');

在线示例:http://jsbin.com/obamiq/1/edit

这个例子没有包含translate screw这些值,等会抽时间做个完整的。

JavaScript 读取CSS3 transform的更多相关文章

  1. JavaScript - 基于CSS3动画的实现

    在痛苦的IE8时代,所有的动画都只能基于自己计算相关动画属性,开定时器setTimeout/setInterval轮询动画任务. 而肩负重任的HTML5,早已注意到了日益增强的动画,随着HTML5的降 ...

  2. 【CSS3】 理解CSS3 transform中的Matrix(矩阵)

    理解CSS3 transform中的Matrix(矩阵) by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu ...

  3. 理解CSS3 transform中的Matrix(矩阵)

    一.哥,我被你吓住了 打架的时候会被块头大的吓住,学习的时候会被奇怪名字吓住(如“拉普拉斯不等式”).这与情感化设计本质一致:界面设计好会让人觉得这个软件好用! 所以,当看到上面“Matrix(矩阵) ...

  4. 理解CSS3 transform中的Matrix(矩阵)——张鑫旭

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=2427 一.哥,我被你 ...

  5. How to get the MouseEvent coordinates for an element that has CSS3 Transform?

    I want to detect where a MouseEvent has occurred, in coordinates relative to the clicked element. Wh ...

  6. 小心 CSS3 Transform 引起的 z-index "失效"

    https://www.douban.com/note/343402554/ http://www.jb51.net/css/255811.html 最后我直接removeClass;把transfo ...

  7. CSS3 transform rotate(旋转)锯齿的解决办法

    -moz-transform: rotate(5deg);-webkit-transform: rotate(5deg); 把图片旋转了5度.本以为轻而易举,可遇到了问题.在Fireofx中显示正常, ...

  8. CSS3 transform对普通元素的N多渲染影响

    一.一入transform深似海 一个普普通通的元素,如果应用了CSS3 transform变换,即便这个transform属性值不会改变其任何表面的变化(如scale(1), translate(0 ...

  9. 简单使用JSON,JavaScript读取JSON文本(三)

    JavaScript 读取 JSON 文本转换为对象 JSON 最常见的用法之一,是从 web 服务器上读取 JSON 数据(作为文件或作为 HttpRequest),将 JSON 数据转换为 Jav ...

随机推荐

  1. CSGO 服务端扩展插件开发记录之"DropClientReason"(1)

    最近开始接触到了CSGO这款游戏,还是老套路,就是想千方百计的从里面增添新的游戏功能,当然刚开始想做到游刃有余是有点困难, 跟之前做CS1.6的第三方开发一样,都得自己慢慢的摸索过来,纵然CSGO所使 ...

  2. vs code 编译python 输出到调试控制台

    如图所示,在debug菜单中点击齿轮按钮,进入launch.json,更改console选项的值(有三种) "console": "internalConsole&quo ...

  3. Android ContentProvider 基本原理和使用详解

    ContentProvider(内容提供者)是 Android 的四大组件之一,管理 Android 以结构化方式存放的数据,以相对安全的方式封装数据(表)并且提供简易的处理机制和统一的访问接口供其他 ...

  4. 第十三章 nginx代理服务

    一.数据库迁移 1.常见原因 1.数据库要做升级2.数据库服务器到期需要迁移 2.新服务器搭建数据库 [root@db02 ~]# yum install -y mariadb-server 3.启动 ...

  5. 【认知服务 Azure Cognitive Service】使用认知服务的密钥无法访问语音服务[ErrorCode=AuthenticationFailure] (2020-08时的遇见的问题,2020-09月已解决)

    问题情形 根据微软认知服务的文档介绍,创建认知服务(Cognitive Service)后,可以调用微软的影像(计算机视觉,人脸),语言(LUIS, 文本分析,文本翻译),语音(文本转语音,语音转文本 ...

  6. 【多次实践】win10+ubuntu18.04lts双系统安装葵花宝典(安装篇)

    这个教程诞生的缘由很简单,吃的太饱,硬是要折腾,结果,这一折腾便是20余小时,故写此文,帮助后来者少走弯路! 在本文开始,请先允许我对网上很多类似的教程嗤之以鼻,很成功地让我走了很多的弯路,一些有效简 ...

  7. Unity控制角色移动

    Copy代码前的准备工作 整体结构 建立个空对象命名随意,主要是为了:角色掉出地图时,可以回到空对象的位置 在建立个空对象命名为Player,放到PlayResurrectionPoints子级下,并 ...

  8. 在学习python的过程中,遇到的最大的困难是什么?

    本人文科生,回顾自己近 2 年的Python 自学经历,有一些学习心得和避坑经验分享给大家,让大家在学习 Python 的过程中少走一些弯路!减少遇到不必要的学习困难! 首先,最开始最大的困难应该就是 ...

  9. SpringBoot第二集:注解与配置(2020最新最易懂)

    2020最新SpringBoot第二集:基础注解/基础配置(2020最新最易懂) 一.Eclipse安装SpringBoot插件 Eclipse实现SpringBoot开发,为便于项目的快速构建,需要 ...

  10. 如何将Docker升级到最新版本

    很早以前,已经使用过了Docker了,但是没有使用过 Docker 部署 NetCore 3.1 的应用程序,今天部署的时候发生了一些问题,解决办法:Docker 版本太低了,那就升级一下.下面是具体 ...