从matrix3d获取CSS 3D变换

Question

我在现有的堆栈、答案和网页上搜索，但没有找到任何正确且有效的解决方案。

我想要通过使用matrix3D获取易读的CSS 3D变换（包括rotateX、rotateY、rotateZ、translateX、translateY、translateZ、scaleX、scaleY和scaleZ）。

有人能够解释如何实现这一点吗？或者能否提供可靠的来源？

我并不擅长数学，但我会尽力理解。

提前感谢！

Jo

- Jordan

---

我认为这是不可能的，我相信浏览器将所有的变换值编译成一个矩阵值来渲染CSS。至少这是你从JavaScript中检索到的一个矩阵值，而且没有办法找出最初使用了哪些变换值。例如，您可以混合使用不同的缩放和扭曲值来获得相同的屏幕结果。 - G-Cyrillus

那么，没有办法将1度添加到rotateX中吗？ - Jordan

看看我的答案并试玩演示 :) - G-Cyrillus

Answer 1

你所寻找的内容称为“矩阵分解”。对于3D矩阵，您需要考虑旋转的顺序（例如欧拉角XYZ或ZXY）。请参考以下内容： 用TypeScript编写的一些Matrix3D代码。 请查看decompose()方法。

例如，提取缩放（列主序）：

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

- jbenker

---

哇！好久之后终于决定购买一本书，为CSS 3D变换创建自己的JavaScript矩阵库（在第5300行附近搜索“Jo.matrix =”） https://github.com/JordanDelcros/Jo/blob/master/jo/jo.js 但你的答案是正确的。 - Jordan

我认为Franklin TA很久以前就做过类似的事情：https://franklinta.com/2014/09/08/computing-css-matrix3d-transforms/ - JoelBonetR

Answer 2

好的。矩阵数值可以像这样：

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

如果您可以轻松地重新调整或移动元素，并手动更新矩阵值，则对于值2和3需要进行计算，这将变得棘手。

这里有一个可供尝试的示例

---

请参考：http://dev.opera.com/articles/view/understanding-the-css-transforms-matrix/ 或 https://developer.mozilla.org/en-US/docs/Web/CSS/transform。这些链接与CSS变换矩阵有关。

- G-Cyrillus

---

好的，我理解二维矩阵。 但是对于三维呢？ - Jordan

@Jordan，这是在dev.opera文章中的语法：transform: matrix3d(1, -0.2, 0.2, 0.01, 0.01, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);，但你仍然需要使用transform-style和perspective来模拟屏幕上的3D效果。例如：http://codepen.io/gc-nomade/pen/FHmLI/（最后一个）。 - G-Cyrillus

你好，@Jordan Mozilla说... matrix(a, b, c, d, tx, ty) 是 matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1) 的简写。 - G-Cyrillus

好的，但是如何将一个matrix3d转换为CSS变换样式，例如“rotateX（10度）rotateY（20度）rotateZ（120度）”？ - Jordan