某些场景需要读取 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. 洛谷 P1903 [国家集训队]数颜色 / 维护队列 带修莫队

    题目描述 墨墨购买了一套\(N\)支彩色画笔(其中有些颜色可能相同),摆成一排,你需要回答墨墨的提问.墨墨会向你发布如下指令: \(1\). \(Q\) \(L\) \(R\)代表询问你从第\(L\) ...

  2. Python+Appium自动化测试(3)-编写自动化脚本

    之前一篇博客已经讲述怎样手动使用appium-desktop启动测试机上的app,但我们实际跑自动化脚本的过程中,是需要用脚本调用appium启动app的,接下来就尝试写Python脚本启动app并登 ...

  3. Linux中断驱动程序

    1.中断概念 中断时一种电信号,由硬件设备产生,然后再由中断控制器向处理器发送相应的信号.处理器一经检测到该信号,便中断自己当前正在处理的工作,转而去处理中断.此后,处理器会通知操作系统已经产生中断. ...

  4. Spring系列 SpringMVC的请求与数据响应

    Spring系列 SpringMVC的请求与数据响应 SpringMVC的数据响应 数据响应的方式 y以下案例均部署在Tomcat上,使用浏览器来访问一个简单的success.jsp页面来实现 Suc ...

  5. 程序3-6 WERTYU

    把手放在键盘上时,稍不注意就会往右错一 位.这样,输入Q会变成输入W,输入J会变成输 入K等.键盘如图3-2所示. 输入一个错位后敲出的字符串(所有字母均 大写),输出打字员本来想打出的句子.输入保 ...

  6. 框架-设备与驱动的拆分及实现-I2C

    目录 前言 笔录草稿 概要 原理及实现方法 IIC 例子实战-驱动 1. 创建文件 2. 创建 I2C 驱动名字列表 3. 组建 I2C 驱动结构体 4. 编写-注册 I2C 驱动函数 5. 创建 I ...

  7. 【logstash】 - 使用json解析数

    ilter-json:http://www.logstash.net/docs/1.4.2/filters/json json数据: {"account_number":995,& ...

  8. scrapy数据写入管道

    1 setting里面启动管道 ITEM_PIPELINES = { 'ganji.pipelines.GanjiPipeline': 300,}2 拿到的数据通过yield返回给管道 # -*- c ...

  9. Mac安装stf

    1.brew install rethinkdb graphicsmagick zeromq protobuf yasm pkg-config 2.node版本8.x我的是8.15.0 3.npm i ...

  10. springboot入门系列(三):SpringBoot教程之RabbitMQ示例

    SpringBoot教程之RabbitMQ示例 SpringBoot框架已经提供了RabbitMQ的使用jar包,开发人员在使用RabbitMQ的时候只需要引用jar包简单的配置一下就可以使用Rabb ...