您的位置：首页 > Web前端 > CSS

通过js获取元素css3的transform rotate旋转角度方法

2017-04-07 16:32 1016 查看
我们再试用jquery获取样式的时候是通过$('domName').css('transform')；的方式来获取元素的css样式，但是通过它获取到的css3的transform属性是以矩阵的方式呈现的：matrix(a,b,c,d,e,f);这样的返回值并不是我们想要的结果。

我们要想获取真正的旋转角度值就需要通过一系列的处理来过去，具体方法是：



<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>Document</title>
</head>
<style>
#divTransform{
margin:30px;
width:200px;
height:100px;
background-color:yellow;
/*Rotatediv*/
transform:rotate(9deg);
-ms-transform:rotate(9deg);
/*InternetExplorer*/
-moz-transform:rotate(9deg);
/*Firefox*/
-webkit-transform:rotate(9deg);
/*Safari和Chrome*/
-o-transform:rotate(9deg);
/*Opera*/
}
</style>
<body>
<divid="divTransform">
</div>
</body>
<script>
varel=document.getElementById("divTransform");
varst=window.getComputedStyle(el,null);
vartr=st.getPropertyValue("-webkit-transform")||
st.getPropertyValue("-moz-transform")||
st.getPropertyValue("-ms-transform")||
st.getPropertyValue("-o-transform")||
st.getPropertyValue("transform")||
"FAIL";
//Withrotate(30deg)...
//matrix(0.866025,0.5,-0.5,0.866025,0px,0px)
console.log('Matrix:'+tr);
//rotationmatrix-http://en.wikipedia.org/wiki/Rotation_matrixvarvalues=tr.split('(')[1].split(')')[0].split(',');
vara=values[0];
varb=values[1];
varc=values[2];
vard=values[3];
varscale=Math.sqrt(a*a+b*b);
console.log('Scale:'+scale);
//arcsin,convertfromradianstodegrees,round
varsin=b/scale;
//nextlineworksfor30degbutnot130deg(returns50);
//varangle=Math.round(Math.asin(sin)*(180/Math.PI));
varangle=Math.round(Math.atan2(b,a)*(180/Math.PI));
console.log('Rotate:'+angle+'deg');
</script>
</html>


ViewCode



这个方法是国外的牛人写的，记录下来。


                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航