使用JavaScript从matrix3d()获取3D CSS旋转值 [英] Get 3D CSS rotation value from matrix3d() with JavaScript
本文介绍了使用JavaScript从matrix3d()获取3D CSS旋转值的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个元素3D转换了这样的东西:
I have an element 3D transformed something like this:
.foo {
transform: rotateX(-30deg) rotateY(35deg);
}
现在我想通过javascript获取这些值。很容易得到3D矩阵:
Now I want to get these values via javascript. It's easy to get the 3D matrix:
var matrix = $('.foo').css('transform');
// return:
// matrix3d(0.819152, -0.286788, -0.496732, 0, 0, 0.866025, -0.5, 0, 0.573576, 0.409576, 0.709406, 0, 0, 0, 0, 1)
但是是否可以使用该矩阵计算像值-30和35这样的CSS?我刚刚找到了 2D转换的方法。
But is it possible to calculate CSS like values -30 and 35 with that matrix? I just found ways to do this for 2D transforms.
推荐答案
好的,有了!
var _getTransform = function($element) {
var matrix = $element.css('transform'),
rotateX = 0,
rotateY = 0,
rotateZ = 0;
if (matrix !== 'none') {
// do some magic
var values = matrix.split('(')[1].split(')')[0].split(','),
pi = Math.PI,
sinB = parseFloat(values[8]),
b = Math.round(Math.asin(sinB) * 180 / pi),
cosB = Math.cos(b * pi / 180),
matrixVal10 = parseFloat(values[9]),
a = Math.round(Math.asin(-matrixVal10 / cosB) * 180 / pi),
matrixVal1 = parseFloat(values[0]),
c = Math.round(Math.acos(matrixVal1 / cosB) * 180 / pi);
rotateX = a;
rotateY = b;
rotateZ = c;
}
return {
rotateX: rotateX,
rotateY: rotateY,
rotateZ: rotateZ
};
}
这篇关于使用JavaScript从matrix3d()获取3D CSS旋转值的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文