• jquery 获取css3 transform 值


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

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

    html代码

    <div id="divTransform">
    </div>
    <script>
    var nowDeg = $("#divTransform").css("transform");

    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);
    var nowDeg = $("#divTransform").css("transform");

    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>

    这样就能获取transform的值啦
  • 相关阅读:
    Lighthead SiteCrawler
    svnbook
    SFTP in Python: Really Simple SSH
    WP Robot Wordpress plugin logo
    use curl to post data for work punch
    Setting up Hudson on port 80 on a Debian or Ubuntu machine
    Problem with PEXPECT in Python
    H2 Database Engine — h2database.com — Readability
    execnet: rapid multiPython deployment
    Maven问题总结 3 技术改变生活商业成就梦想 51CTO技术博客
  • 原文地址:https://www.cnblogs.com/qingcui277/p/7918768.html
Copyright © 2020-2023  润新知