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

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

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

Document

#divTransform {

margin: 30px;

width: 200px;

height: 100px;

background-color: yellow;

/* Rotate div */

transform: rotate(9deg);

-ms-transform: rotate(9deg);

/* Internet Explorer */

-moz-transform: rotate(9deg);

/* Firefox */

-webkit-transform: rotate(9deg);

/* Safari 和 Chrome */

-o-transform: rotate(9deg);

/* Opera */

}

var el = document.getElementById("divTransform");

var st = window.getComputedStyle(el, null);

var tr = st.getPropertyValue("-webkit-transform") ||

st.getPropertyValue("-moz-transform") ||

st.getPropertyValue("-ms-transform") ||

st.getPropertyValue("-o-transform") ||

st.getPropertyValue("transform") ||

"FAIL";

// With rotate(30deg)...

// matrix(0.866025, 0.5, -0.5, 0.866025, 0px, 0px)

console.log('Matrix: ' + tr);

// rotation matrix - http://en.wikipedia.org/wiki/Rotation_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');

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

原生js获取元素非行内样式属性的方法

获取当前对象的样式DOM标准中的全局方法 getComputedStyle(obj).width (获取元素的宽度),但在非标准IE浏览器(IE8)以下有兼容问题IE8以下要这样写 obj.curre ...

【全面总结】js获取元素位置大小

[js获取元素位置+元素大小]全面总结 目录 1.关于offset offsetParent(只读) offsetTop(只读) offsetLeft(只读) offsetHeight(只读) off ...

js获取元素位置和style的兼容性写法

今天说一下js获取元素位置和style的方法.当然不只是element.style那么简单.. 主角:getBoundingClientRect,getClientRects,getComputedS ...

js获取元素提示信息

js获取元素提示信息 var date=$("#date").attr('placeholder'); js修改元素的提示信息 $("#date").attr( ...

JS获取元素宽高的两种情况

JS获取元素宽高分两种情况, 一.内联样式,也就是直接把width和height写在HTML元素中的style里: 这种情况使用     document.getElementById('xxx'). ...

js获取元素显示隐藏的当前状态

js获取元素显示隐藏的当前状态 // CSS var display = $("."+cls).css("display"); if(display == &q ...

js获取元素的外链样式

一般给元素设置行内样式,如

原生js获取元素的样式信息

工作中经常会需要获取DOM元素的样式,之前都是通过jquery的css()方法,现在总结一下通过原生js获取元素样式的方法. obj.style js var _width = obj.style.w ...

js 获取元素坐标 和鼠标点击坐标

js 获取元素的位置 var odiv=document.getElementById('divid'); alert(odiv.getBoundingClientRect().left); aler ...

随机推荐

Alg-4：算法可视化tiny库的实现

好吧,准备好好实践一下这本书的内容的,有点讨厌的是这本书是以Java作为示例语言的(好吧,我承认我有语言偏见,Java就是臭).其中有一个Std库,其中涉及到简化输入输出.随机数生 ...

九幽2015年Q3 WP市场份额细分报告

上周,被微软称为史诗级别的Win10纽约新品发布会已落下帷幕,90分钟.六款新品齐发的庞大阵势,相信让大家眼花缭乱.兴奋不已吧.而在新品发布会上微软也晒出了Win10发布以来的可喜成绩单:Win10系 ...

html dom的加载

操作HTML DOM文档的一个难题是,你的JavaScript代码可能在DOM完全载入之前运行,这会导致你的代码产生一些问题.页面加载时浏览器内部操作的顺序大致是这样的: 1. HTML被解析. 2. ...

js函数收藏：获取cookie值

//先设置一段子cookie var d = new Date(); d.setMonth(d.getMonth() + 1); d = d.toGMTString(); var a = " ...

github多人协作

1.字符串处理(编码原理) git clone git@github.com:lookphp/LaravelCms.git git add . git commit -m "修改的内容-需要 ...

Android 音频管理器AudioManager

音频管理器AudioManager,通过它可以管理android系统的音量或直接让系统静音,依旧是通过调用getSystemService()方法获取音频管理器AudioManager对象,获取到该对 ...

chrome调试技巧

1.开始调试:右键审查元素 2.按钮功能: 调出控制台: 切换开发环境全屏还是嵌入: 清空当前显示: 将压缩 js 文件格式化缩进规整的文件: 3.常用页面功能: 查看.编辑(双击)HTML: 查看选 ...

070、如何定制Calico 网络policy(2019-04-15 周一)

参考https://www.cnblogs.com/CloudMan6/p/7552618.html     Calico默认的policy是:容器只能与同一个calico网络中的容器通信.   Ca ...

Prime Distance POJ - 2689 (数学 素数)

The branch of mathematics called number theory is about properties of numbers. One of the areas that ...

上下文相关的GMM-HMM声学模型

一.上下文对音素发音的语谱轨迹的影响 受到上下文的影响,同一个音素的发音语谱轨迹不同 为提高识别准确率,对音素建模时应将这种上下文影响考虑在内 二.基于上下文相关的音素建模 注意,非单音素建模中,每个 ...