zoukankan      html  css  js  c++  java
  • 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这些值,等会抽时间做个完整的。

  • 相关阅读:
    TH-Union教学机 指令总结
    Manjaro 显卡驱动安装
    grub学习内容
    manjaro 折腾
    链栈的实现
    汇编综合实验
    二叉树
    Oracle表空间基本操作
    Windows7/10实现ICMP(ping命令)
    WireShark——IP协议包分析(Ping分析IP协议包)
  • 原文地址:https://www.cnblogs.com/jamesldj/p/3253208.html
Copyright © 2011-2022 走看看