某些场景需要读取 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. 2014年 实验五 Internet与网络工具的使用

    实验五 Internet与网络工具的使用 [实验目的]   ⑴.FTP服务器的架设和客户端的使用. ⑵.使用云盘和云笔记应用 ⑶.运用QQ的远程协助功能. (4).默认安装foxmail软件,进行邮件 ...

  2. JAVA中的变量及取值范围

    字节是二进制数据的单位.一个字节通常8位长.但是,一些老型号计算机结构使用不同的长度.为了避免混乱,在大多数国际文献中,使用词代替byte.变量: 变量的数据类型:变量名=变量值 数据类型 基本型 数 ...

  3. pytest文档49-命令行参数--tb的使用

    前言 pytest 使用命令行执行用例的时候,有些用例执行失败的时候,屏幕上会出现一大堆的报错内容,不方便快速查看是哪些用例失败. --tb=style 参数可以设置报错的时候回溯打印内容,可以设置参 ...

  4. ASP.NET Core 3.1 Razor 视图预编译、动态编译

    1.安装NuGet包 Install-Package Microsoft.AspNetCore.Mvc.Razor.RuntimeCompilation 2.Startup.cs 配置 public ...

  5. 蓝桥杯2020 E:七段码

    题解 正规解法是 dfs + 并查集,首先用 dfs 将其所有的情况枚举出来,再用并查集来判断是否在一个连通块上. 许多小伙伴计算的答案为76,主要是判断连通块这方面有问题,倘若不用并查集,直接枚举一 ...

  6. Linux系统Yum仓库制作

    在使用Linux系统的时候,通常需要安装许多软件,Linux系统通常安装软件有源码包安装(文件格式:.tar.gz 或.tar.bz2:安装过程:解压.环境检查.编译和安装).Rpm包安装(文件格式: ...

  7. 布隆过滤器 Bloom Filter 2

    date: 2020-04-01 17:00:00 updated: 2020-04-01 17:00:00 Bloom Filter 布隆过滤器 之前的一版笔记 点此跳转 1. 什么是布隆过滤器 本 ...

  8. java实现单链表、栈、队列三种数据结构

    一.单链表 1.在我们数据结构中,单链表非常重要.它里面的数据元素是以结点为单位,每个结点是由数据元素的数据和下一个结点的地址组成,在java集合框架里面 LinkedList.HashMap(数组加 ...

  9. 备战noip week8

    POJ1144 网络 description: 给出一张\(N\)个点的无向图,求其中割点的个数 data range: \(N\le 100\) solution: 一道模板题(但是读入实在是把我恶 ...

  10. UI自动化执行时报Parent suite setup failed: SessionNotCreatedException: Message: session not created: This version of ChromeDriver only supports Chrome version 81报错的问题解决

    持续集成在执行UI时报错:Parent suite setup failed: SessionNotCreatedException: Message: session not created: Th ...