使用JavaScript从matrix3d()中获取3D CSS旋转值
Get 3D CSS rotation value from matrix3d() with JavaScript
我有一个元素经过3D转换,如下所示:
.foo {
transform: rotateX(-30deg) rotateY(35deg);
}
现在我想通过javascript获取这些值。很容易获得3D矩阵:
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)
但是,有可能用这个矩阵来计算类似CSS的值-30和35吗?我刚刚找到了2D变换的方法。
好的,明白了!
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
};
}
相关文章:
- 使用 jQuery 的 .on 函数如何获取事件的原始元素
- jquery试图按名称获取按钮位置
- 如何在jQuery中获取元素的形式
- 如何在php文件中获取$.post-ajax传递的值
- 在Shopify中获取博客文章的图片
- 使用Javascript获取所选选项ID
- 在jQuery中获取表的行索引
- 使用jquery将mysql数据获取到新的表行中
- 在动态创建的元素上获取对特定选择器的引用
- 从城市名称获取惊喜
- Angular只从数组中获取所需的数据
- 无法将数据从firebase获取到我的html页面
- 3d.js(力)-获取工具提示链接上的当前鼠标位置
- 使用JavaScript从matrix3d()中获取3D CSS旋转值
- 使用三个js获取3D对象的Axis
- 使用Three.js获取两个3d矢量之间的方向
- 如何获取CSS3-3d转换元素的屏幕位置
- JavaScript运行时错误:无法获取property 'geometries'当将3D模型导入thr
- 如何在WebGL 3d空间中从鼠标点击坐标获取对象
- 获取区域(3d 立方体)中的所有对象(网格)