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 ...
随机推荐
- JVM(五):JVM模型与GC
确定垃圾 引用计数(存在循环引用问题) 根可达算法 常见的垃圾回收算法 标记清除算法-位置不连续,产生碎片 拷贝算法- 没有碎片,浪费空间 标记压缩-没有碎片,效率偏低(多线程需要进行线程同步,单线程 ...
- 网易新闻精彩评论集合(慢慢收集ing)
一.刚才在停车场看一男的开个Q7,怎么也停不进去.我迅速把车停好要过去帮忙,他死活不同意.我说,你刚也看见了我的停车技术了,肯定不能给你刮了.他干脆把窗户摇上了.如今的社会啊,人与人的互信程度为什么就 ...
- day33 Pyhton logging 模块和包
一内容回顾 try/except try/except/else try/finally try/except try/except/finally try/except/else/finally 报 ...
- selenium原理学习笔记
一,selenium工作原理(参考文档:https://blog.csdn.net/dawei_yang000000/article/details/87639928) 自动化测试代码发送请求给到浏览 ...
- python 爬取简书评论
import json import requests from lxml import etree from time import sleep url = "https://www.ji ...
- document.all.WebBrowser为空或不是对象
项目中也想用这个功能,发现出错,经过测试,一定要加<object id="WebBrowser" width=0 height=0 classid="CLSID:8 ...
- wifi - 攻击环境准备
1.Windows 环境准备 对于Windows系统,只需要Windows XP SP2以上就行了,安装对应网卡驱动 2.Linux 环境准备 绝大多数黑客会选择Linux作为测试平台,因为绝大多数无 ...
- http请求需要了解的一些信息
http请求需要了解的一些信息 http请求头:https://jingyan.baidu.com/article/375c8e19770f0e25f2a22900.htmlhttp状态码 :http ...
- Linux基础命令cp之拷贝隐藏文件
创建一个用户名为test211的普通用户 [23:35:09 root@C8[ ~]#useradd test211 [23:37:37 root@C8[ ~]#getent passwd test2 ...
- Linux基础命令之getent
getent命令简述 getent - get entries(entry的复数,条目.项目.记载.记录) getent命令可以用来察看系统的数据库中的相关记录 经常使用getent查看用户账号: 之 ...