某些场景需要读取 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. Flink深入浅出: 资源管理(v1.11)

    -- 图片来自 <国家地理中文网>-- 往期推荐: Flink深入浅出:部署模式 Flink深入浅出:内存模型 Flink深入浅出:JDBC Source从理论到实战 Flink深入浅出: ...

  2. golang 语言的特性

    给函数传递参数的时候 map.slice.channel是按引用传递的 同一个变量不能用 := 这种方式创建并赋值两次. 一个包(package)的func .结构体类型变量如果要被外部的包调用.fu ...

  3. 多测师讲解html _链接标签004_高级讲师肖sir

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>链 ...

  4. 多测师_高级肖sir分享pycharm中设置主题和设置代码颜色方法

    一.修改pycharm中的主题颜色 二.修改代码颜色 File-->Settings-->Editor--> Color Scheme-->Language Defaults- ...

  5. ucore操作系统学习笔记(二) ucore lab2物理内存管理分析

    一.lab2物理内存管理介绍 操作系统的一个主要职责是管理硬件资源,并向应用程序提供具有良好抽象的接口来使用这些资源. 而内存作为重要的计算机硬件资源,也必然需要被操作系统统一的管理.最初没有操作系统 ...

  6. MeteoInfoLab脚本示例:SeaWiFS HDF Grid数据

    SeaWiFS HDF Grid数据读取,特别是涉及到了文件的众多属性数据的读取,数据取对数后绘图.脚本程序: #Add data file f = addfile('D:/Temp/hdf/S199 ...

  7. day15 Pyhton学习

    迭代器 掌握for循环 实际上for循环的本质,就是将一个可迭代的变成迭代器 每一次从中取值都相当于执行了一次next 如果是迭代器,那么只能取一次值 生成器 - 本质就是迭代器 生成器函数(返回值是 ...

  8. utf-8和utf-8-sig的区别

    前言:在写入csv文件中,出现了乱码的问题. 解决:utf-8 改为utf-8-sig 区别如下: 1."utf-8" 是以字节为编码单元,它的字节顺序在所有系统中都是一样的,没有 ...

  9. 通过maven创建springboot项目

    1,idea选择创建一个maven项目 2,pom.xml <dependencies> <dependency> <groupId>org.springframe ...

  10. LinkBlockedQueue的c++实现

    c++链表实现的阻塞队列 最近从java源码里发现了阻塞队列的实现,觉得非常有趣. 首先,介绍下什么是阻塞队列.阻塞队列代表着一个队列可以线程安全的往该队列中写数据和从该队列中读数据.也就是说,我们可 ...