最近写了个旋转,有要求获取transform值。当看到console.log($("#id").css("transform"))的值的时候,我的内心是崩溃的

所以我特地找了下,虽然对矩阵还是不怎么理解,以下代码帮助理解吧

html代码

  1. <div id="divTransform">
    </div>
  1. <script>
    var nowDeg = $("#divTransform").css("transform");
  2.  
  3. function getmatrix(a,b,c,d){
    var aa=Math.round(180*Math.asin(a)/ Math.PI);
    var bb=Math.round(180*Math.acos(b)/ Math.PI);
    var cc=Math.round(180*Math.asin(c)/ Math.PI);
    var dd=Math.round(180*Math.acos(d)/ Math.PI);
    var deg=0;
    if(aa==bb||-aa==bb){
    deg=dd;
    }else if(-aa+bb==180){
    deg=180+cc;
    }else if(aa+bb==180){
    deg=360-cc||360-dd;
    }
    return deg>=360?0:deg;
    //return (aa+','+bb+','+cc+','+dd);
    }
    var values = nowDeg.split('(')[1].split(')')[0].split(',');
    var a = values[0];
    var b = values[1];
    var c = values[2];
    var d = values[3];
    nowDeg = getmatrix(a,b,c,d);
    console.log(nowDeg);
  1. var nowDeg = $("#divTransform").css("transform");
  2.  
  3. function getmatrix(a,b,c,d){
    var aa=Math.round(180*Math.asin(a)/ Math.PI);
    var bb=Math.round(180*Math.acos(b)/ Math.PI);
    var cc=Math.round(180*Math.asin(c)/ Math.PI);
    var dd=Math.round(180*Math.acos(d)/ Math.PI);
    var deg=0;
    if(aa==bb||-aa==bb){
    deg=dd;
    }else if(-aa+bb==180){
    deg=180+cc;
    }else if(aa+bb==180){
    deg=360-cc||360-dd;
    }
    return deg>=360?0:deg;
    //return (aa+','+bb+','+cc+','+dd);
    }
    var values = nowDeg.split('(')[1].split(')')[0].split(',');
    var a = values[0];
    var b = values[1];
    var c = values[2];
    var d = values[3];
    nowDeg = getmatrix(a,b,c,d);
    console.log(nowDeg);
    </script>
  4.  
  5. 这样就能获取transform的值啦

jquery 获取css3 transform 值的更多相关文章

  1. [转载]jquery获取元素索引值index()方法:

    jquery的index()方法 搜索匹配的元素,并返回相应元素的索引值,从0开始计数. 如果不给 .index() 方法传递参数,那么返回值就是这个jQuery对象集合中第一个元素相对于其同辈元素的 ...

  2. jquery获取元素索引值index()方法

    jquery的index()方法 搜索匹配的元素,并返回相应元素的索引值,从0开始计数. 如果不给 .index() 方法传递参数,那么返回值就是这个jQuery对象集合中第一个元素相对于其同辈元素的 ...

  3. JavaScript和JQuery获取DIV的值

    1.设计源代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...

  4. 使用jquery获取radio的值

     使用jquery获取radio的值,最重要的是掌握jquery选择器的使用,在一个表单中我们通常是要获取被选中的那个radio项的值,所以要加checked来筛选,比如有以下的一些radio项: ...

  5. jquery获取radio选中值及遍历

    使用jquery获取radio的值,最重要的是掌握jquery选择器的使用,在一个表单中我们通常是要获取被选中的那个radio项的值,所以要加checked来筛选,比如有以下的一些radio项:1.& ...

  6. JavaScript or jQuery 获取option value值 以及文本内容的方法

    1.html <div class="form-group"> <label>保险公司</label> <select class=&qu ...

  7. jquery获取元素索引值index()

    jquery获取元素索引值index()方法实例. jquery获取元素索引值index()方法: jquery的index()方法 搜索匹配的元素,并返回相应元素的索引值,从0开始计数. 如果不给 ...

  8. jquery获取元素索引值index()的例子

    如果参数是一组DOM元素或者jQuery对象,那么返回值就是传递的元素相对于原先集合的位置. 如果参数是一个选择器,那么返回值就是原先元素相对于选择器匹配元素中的位置.如果找不到匹配的元素,则返回-1 ...

  9. jQuery获取多种input值的方法

    1 if($("input[name=item][value='val']").attr('checked')==true) //判断是否已经打勾 name即控件name属性,va ...

随机推荐

  1. php7 安装mongodb扩展

    下载 mongodb-1.6.0.tgz   wget https://pecl.php.net/get/mongodb-1.6.0.tgz  版本太低的话有些语法不一样,起码1.5以上吧 进入 mo ...

  2. Laravel5.4 队列简单配置与使用

    概述 什么是队列? 百度百科是这样说的 “队列”是在传输过程中保存数据的容器. 举几个生活中例子: * iphone手机新款发布,三里屯iphone进的新货.大家要排队买,不能说一大堆人一起冲进去,那 ...

  3. ospf实验

    以上是实验要求和实验拓扑 R1到R5的ip自己配置了 1. #int loopback 0 #IP add 1.1.1.1 24 2.基本命令R5例: #ospf 1 router-id 5.5.5. ...

  4. ajax异步的加深理解

    过去印象中的ajax的异步操作,一直还居然在$.ajax函数内部的异步,真是大错特错,实际的异步操作,是针对整个js文件来的. 今天总算意识到了,实际情况如下: $(function(){ //[弹框 ...

  5. AUTO Uninstaller 常见问题

    小伙伴是不是遇到 CAD/3dmax/maya/Revit/Inventor 安装失败或者安装不了的问题了呢?AUTODESK系列软件着实令人头疼,CAD/3dmax/maya/Revit/Inven ...

  6. Java IO: 字节和字符数组

    原文链接  作者: Jakob Jenkov   译者:homesick 内容列表 从InputStream或者Reader中读入数组 从OutputStream或者Writer中写数组 在java中 ...

  7. 为啥java要使用 set ()和get()方法---封装

    封装性:属性封装,方法封装,类封装,组件封装等 例如:如果属性没有封装,那么在本类对象之外创建对象后,可以直接访问属性 private关键字,只能在本类中访问,想要在外部访问私有属性,我们需要提供公有 ...

  8. Thrift RPC实战(三) thrift序列化揭秘

    本文主要讲解Thrift的序列化机制, 看看thrift作为数据交换格式是如何工作的? 1.构造应用场景: 1). 首先我们先来定义下thrift的简单结构. 1 2 3 4 5 namespace ...

  9. Python---10小结

    因一边上班一边自学python,一旦忙起来,python就会放两天,可是2天后之前学的内容就会有点忘记. 今天把python的各种启动方法总结一下; 我的文档路径: ------- 1打开文件所在的c ...

  10. 20. API概览 Schemas

    能被机器所理解的概要, 描述了通过api可得到的资源, URL, 表示方式以及支持的操作. API概要在很多使用场景下都是有用的工具, 例如生成参考文档, 或者驱动可以与API交互的动态客户端库. r ...