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 ...
随机推荐
- devops-jenkins基于角色的权限管理RBAC
一. devops-jenkins基于角色的权限管理RBAC 1 安装角色的rbac角色管理 1.1) 点击系统管理 1.2) 选择插件管理 1.3) 选择可选插件,输入role搜索 1.4) 选择 ...
- Python:MySQL数据库环境相关问题
系统环境 Ubuntu 16.04.2 LTS mysql Ver 14.14 Distrib 5.7.18, for Linux (x86_64) using EditLine wrapper P ...
- 关于ptype_all和pypte_base中的pt_prev的说明[转]
不知道原帖,我是从这里看到了,解决了迷惑我很久的疑问,抄过来. 看见noble_shi兄弟"关于net_rx_action函数的若干问题"贴中关于pt_prev的问题, 本来想在论 ...
- linux centos 04
1.python的虚拟环境 1.将当前机器上的解释器作为一个 本地,复制出的很多歌 虚拟解释器 物理机上的 本体解释器 ,什么事也不做 分身1: 解释器1:虚拟环境1 运行django 1 ...
- MVC-WebApi配置 Swagger(Web Api可视化文档)
一.从创建MVC WebApi开始 第一步创建MVC WebApi就创建好了,接下来就进入正题,上干货 ================================================ ...
- centos8平台安装gitosis服务
一,git服务器端:准备gitosis需要的各依赖软件 1,确认openssh是否存在?如不存在,以下列命令进行安装 [root@yjweb ~]# yum install openssh opens ...
- <audio> 标签
<audio> 标签定义声音,比如音乐或其他音频流. 实例 一段简单的 HTML 5 音频:
- 基于ECS搭建云上博客
场景介绍 本文为您介绍如何基于ECS搭建云上博客. 背景知识 本场景主要涉及以下云产品和服务: 云服务器ECS 云服务器(Elastic Compute Service,简称ECS)是阿里云提供的性能 ...
- 关于设置Vscode缩进,保存代码任然缩进无效解决方式
在Vscode按F1,运行命令,输入Formatter config 把内容更改为以下代码 { "onSave": true, "javascript": { ...
- dbvis 导出表结构 xls
1.dbvis 可以导出多种格式的文件,如SQL.XLS.TXT.HTML.JSON.CSV及XML. 需求场景(本场景是实际场景引申的场景,此处导出xls): 最近,遇到一个需求需要将表的结构数据导 ...