从matrix3d获取css变换3D

我搜索了现有的堆栈、答案和网络，但我没有找到任何正确和有效的解决方案

我想使用矩阵3d获得人类可读的css三维转换（rotateX、rotateY、rotateZ、translateX、translateY、translateZ、scaleX、scaleY和scaleZ）

有人能解释这样做的方法吗（或者是一个正确且经过验证的来源）

我不是一个数学爱好者，但我已经准备好尽我所能去理解

提前谢谢

乔

好的。 矩阵值可以如下所示：

    matrix( 
        scalex, 
        mix of skewy and rotate, 
        mix of skewx and rotate, 
        scaley, 
        move-left, 
        move-top  
    );

如果可以轻松地通过手动更新矩阵值来重新缩放或移动元素，那么这将变得很棘手，需要计算值2和3。 这里有一个

---

---

请参阅：或

您正在搜索的内容称为“分解矩阵”。对于3D矩阵，你必须考虑旋转的顺序（例如Euler-XYZ或ZXY）。看看： 请看decompose（）方法

例如，提取比例（主列）：

---

我认为这是不可能的，我相信浏览器会将所有转换值编译成一个矩阵值来呈现CSS。至少这是一个从javascript中检索的矩阵值，并且没有办法找出首先使用的转换值。你们可以在屏幕上为相同的结果混合不同的缩放和倾斜值，所以，并没有办法将1deg添加到rotateX？看我的答案并玩演示：）好的，我理解2D矩阵。但是对于3D？@Jordan，在dev.opera文章中使用以下语法：示例

transform:matrix3d（1，-0.2,0.2,0.01,0.01,1,0,0,0,0,0,0,0,1）

但你仍然需要使用

变换样式

和

透视图

在屏幕上模拟3d：示例：（上一个）你好，@Jordan mozilla说。。。矩阵（a，b，c，d，tx，ty）是矩阵x3d（a，b，0，0，c，d，0，0，0，0，0，1，0，tx，ty，0，0，1）的缩写。好的，但是如何将矩阵x3d转换为css转换样式，如“rotateX（10度）rotateY（20度）rotateZ（120度）”？哇！很多次之后！：）我最终决定买一本书，创建自己的javascript矩阵库，特别是CSS 3D转换（搜索“Jo.matrix=”第5300行），但你的答案是正确的。我认为Franklin TA很久以前就做过类似的事情：

var scaleX = Math.sqrt(this.m11 * this.m11 + this.m12 * this.m12 + this.m13 * this.m13);
var scaleY = Math.sqrt(this.m21 * this.m21 + this.m22 * this.m22 + this.m23 * this.m23);
var scaleZ = Math.sqrt(this.m31 * this.m31 + this.m32 * this.m32 + this.m33 * this.m33);