Question

我搜索现有的堆栈并回答网络，但我找不到任何正确且有效的解决方案。

我想用 matrix3D 获得人类可读的css 3d转换（rotateX，rotateY，rotateZ，translateX，translateY，translateZ，scaleX，scaleY和scaleZ）。< / p>

任何人都可以解释这种方式（或者是正确的，经过验证的来源，无论如何）吗？

我不是数学友好的，但我愿意尽力去理解。

先谢谢！

乔

Answer 1

您要搜索的内容称为“分解矩阵”。对于3d矩阵，您必须考虑旋转的顺序（例如Euler-XYZ或ZXY）。看一眼： some Matrix3D code written in TypeScript.看一下decompose（）方法。

E.g。提取缩放（专栏专业）：

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);

Answer 2

好。矩阵值可以是这样的：

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

如果您可以轻松地重新缩放或移动元素手动更新矩阵值，则会变得棘手，需要计算值2和3。这里有 example to play with

请参阅：http://dev.opera.com/articles/view/understanding-the-css-transforms-matrix/或https://developer.mozilla.org/en-US/docs/Web/CSS/transform

从matrix3d获取css变换3D

2 个答案: