通过js获取元素css3的transformrotate旋转角度方法
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
通过js获取元素css3的transformrotate旋转⾓度⽅法
我们再试⽤jquery获取样式的时候是通过$('domName').css('transform')；的⽅式来获取元素的css样式，但是通过它获取到的css3的transform属性是以矩阵的⽅式呈现的：matrix(a, b, c, d, e, f);这样的返回值并不是我们想要的结果。
我们要想获取真正的旋转⾓度值就需要通过⼀系列的处理来过去，具体⽅法是：
1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5<meta charset="UTF-8">
6<title>Document</title>
7</head>
8<style>
9 #divTransform {
10 margin: 30px;
11 width: 200px;
12 height: 100px;
13 background-color: yellow;
14/* Rotate div */
15 transform: rotate(9deg);
16 -ms-transform: rotate(9deg);
17/* Internet Explorer */
18 -moz-transform: rotate(9deg);
19/* Firefox */
20 -webkit-transform: rotate(9deg);
21/* Safari 和 Chrome */
22 -o-transform: rotate(9deg);
23/* Opera */
24 }
25</style>
26
27<body>
28<div id="divTransform">
29</div>
30</body>
31<script>
32var el = document.getElementById("divTransform");
33var st = window.getComputedStyle(el, null);
34var tr = st.getPropertyValue("-webkit-transform") ||
35 st.getPropertyValue("-moz-transform") ||
36 st.getPropertyValue("-ms-transform") ||
37 st.getPropertyValue("-o-transform") ||
38 st.getPropertyValue("transform") ||
39 "FAIL";
40// With rotate(30deg)...
41// matrix(0.866025, 0.5, -0.5, 0.866025, 0px, 0px)
42 console.log('Matrix: ' + tr);
43// rotation matrix - /wiki/Rotation_matrix
44var values = tr.split('(')[1].split(')')[0].split(',');
45var a = values[0];
46var b = values[1];
47var c = values[2];
48var d = values[3];
49var scale = Math.sqrt(a * a + b * b);
50 console.log('Scale: ' + scale);
51// arc sin, convert from radians to degrees, round
52var sin = b / scale;
53// next line works for 30deg but not 130deg (returns 50);
54// var angle = Math.round(Math.asin(sin) * (180/Math.PI));
55var angle = Math.round(Math.atan2(b, a) * (180 / Math.PI));
56 console.log('Rotate: ' + angle + 'deg');
57</script>
58
59</html>
这个⽅法是国外的⽜⼈写的，记录下来。