JavaScript 读取CSS3 transform
某些场景需要读取 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的更多相关文章
- JavaScript - 基于CSS3动画的实现
在痛苦的IE8时代,所有的动画都只能基于自己计算相关动画属性,开定时器setTimeout/setInterval轮询动画任务. 而肩负重任的HTML5,早已注意到了日益增强的动画,随着HTML5的降 ...
- 【CSS3】 理解CSS3 transform中的Matrix(矩阵)
理解CSS3 transform中的Matrix(矩阵) by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu ...
- 理解CSS3 transform中的Matrix(矩阵)
一.哥,我被你吓住了 打架的时候会被块头大的吓住,学习的时候会被奇怪名字吓住(如“拉普拉斯不等式”).这与情感化设计本质一致:界面设计好会让人觉得这个软件好用! 所以,当看到上面“Matrix(矩阵) ...
- 理解CSS3 transform中的Matrix(矩阵)——张鑫旭
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=2427 一.哥,我被你 ...
- 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 ...
- 小心 CSS3 Transform 引起的 z-index "失效"
https://www.douban.com/note/343402554/ http://www.jb51.net/css/255811.html 最后我直接removeClass;把transfo ...
- CSS3 transform rotate(旋转)锯齿的解决办法
-moz-transform: rotate(5deg);-webkit-transform: rotate(5deg); 把图片旋转了5度.本以为轻而易举,可遇到了问题.在Fireofx中显示正常, ...
- CSS3 transform对普通元素的N多渲染影响
一.一入transform深似海 一个普普通通的元素,如果应用了CSS3 transform变换,即便这个transform属性值不会改变其任何表面的变化(如scale(1), translate(0 ...
- 简单使用JSON,JavaScript读取JSON文本(三)
JavaScript 读取 JSON 文本转换为对象 JSON 最常见的用法之一,是从 web 服务器上读取 JSON 数据(作为文件或作为 HttpRequest),将 JSON 数据转换为 Jav ...
随机推荐
- win7如何安装maven
1.Maven的简介Maven是一个项目管理工具,主要用于Java平台的项目构建.依赖管理和项目生命周期管理. 当然对于我这样的程序猿来说,最大的好处就是对jar包的管理比较方便,只需要告诉Maven ...
- IGBT以及MOSFET驱动参数的计算方法
- day41 Pyhton 并发编程04
内容回顾 socket 最底层的网络通信 所有的网络通信都是基于socket 进程 什么是进程? 是操作系统的发展过程中,为了提高cpu的利用率,在操作系统同时运行多个程序的时候,为了数据的安 ...
- day34 Pyhton 网络编程
一今日内容 # 函数 # 面向对象 # 进阶 # 网络编程 4 # 并发编程 6-7 # 概念 # 网络基础 # 局域网的概念 # 交换机和路由器的工作流程 # ip地址 # mac地址 # 子网掩码 ...
- Django的安装和项目的启动
一.安装(安装最新LTS版): 1.命令行安装 pip install django==1.11.18 -i 源 2.pycharm 安装 二.创建项目 1.命令行创建 下面的命令创建了一个名为 ...
- 【Luogu】P1613 跑路
[Luogu]P1613 跑路 一.题目 题目描述 小A的工作不仅繁琐,更有苛刻的规定,要求小A每天早上在6:00之前到达公司,否则这个月工资清零.可是小A偏偏又有赖床的坏毛病.于是为了保住自己的工资 ...
- laravel job 队列
1.数据库建表 php artisan queue:table<span> </span>//队列任务表 php artisan queue:failed-table<s ...
- CentOS8安装本地mail工具-mailx-12.5-29.el8.x86_64
概述 服务器需要发告警邮件 查找是否已安装 [root@C8-1 ~]# type mail -bash: type: mail: not found [root@C8-1 ~]# which mai ...
- hdu6115 Factory (LCA + 倍增)
Factory Time Limit: 20000/10000 MS (Java/Others) Memory Limit: 132768/132768 K (Java/Others)Total ...
- vue中跳转页面逻辑
跳转详情页面具体代码 写这个页面需要安装两个 1.安装axios命令 Cnpm install axios --save 2.安装vant Cnpm install vant --save 在inde ...