封装一个函数
function getRotationDegrees(element) {
var style = window.getComputedStyle(element);
var transformString = style['-webkit-transform']
|| style['-moz-transform']
|| style['transform'];
if (!transformString || transformString == 'none')
return 0;
var splits = transformString.split(',');
var parenLoc = splits[0].indexOf('(');
var a = parseFloat(splits[0].substr(parenLoc + 1));
var b = parseFloat(splits[1]);
var rad = Math.atan2(b, a);
var deg = 180 * rad / Math.PI;
if (deg < 0) deg += 360;
console.log('deg', deg);
return deg;
}
代码:
<div id="aa">一个一个</div>
<style>
div {
width: 300px;
height: 300px;
background-color: red;
margin: 300px;
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
#aa {
animation: spin 5s linear infinite;
animation-fill-mode: forwards;
}
#aa:hover {
animation-play-state: paused;
}
</style>
<script>
function getRotationDegrees(element) {
var style = window.getComputedStyle(element);
var transformString = style['-webkit-transform']
|| style['-moz-transform']
|| style['transform'];
if (!transformString || transformString == 'none')
return 0;
var splits = transformString.split(',');
var parenLoc = splits[0].indexOf('(');
var a = parseFloat(splits[0].substr(parenLoc + 1));
var b = parseFloat(splits[1]);
var rad = Math.atan2(b, a);
var deg = 180 * rad / Math.PI;
if (deg < 0) deg += 360;
console.log('deg', deg);
return deg;
}
let aa = document.getElementById("aa")
aa.onmousemove = function () {
getRotationDegrees(aa)
}
</script>
在vue项目中使用该方法需要用到addEventListener,并且getRotationDegrees函数要放在addEventListener内部执行