给定 rotateX、rotateY 和 rotateZ，我如何计算 matrix3d？答案

【问题标题】：Given rotateX, rotateY, and rotateZ, how can I calculate matrix3d?给定 rotateX、rotateY 和 rotateZ，我如何计算 matrix3d？
【发布时间】：2016-02-05 20:27:16
【问题描述】：

鉴于我有rotateX(20deg)rotateY(30deg)和rotateZ(50deg)三个变换属性，是否可以计算matrix3d(...)？

在此示例中，matrix3d 将是：

matrix3d(0.5568,-0.77,0.50,0,0.77,0.6016,0.34,0,-0.5,-0.34,0.8178,0,0,0,0,1);

【问题讨论】：

也许你应该先计算出数学，然后再尝试编程。 MDN CSS transform-function 文章可能会有所帮助。
是的，旋转只是矩阵变换的特定情况。所有这些都可以相乘得到结果矩阵。

标签： javascript css matrix css-transforms

【解决方案1】：

这里很好地解决了您的 matrix3D 问题：https://gist.github.com/f5io/7466669

var str = matrix3d(0.5568,-0.77,0.50,0,0.77,0.6016,0.34,0,-0.5,-0.34,0.8178,0,0,0,0,1),
out = create();
function deg2rad(deg) {
return deg * (Math.PI / 180);
}
function create() {
var out, args = Array.prototype.slice.call(arguments);
if (args.length > 0 && args.length < 16) throw 'Invalid arguments supplied!';
if (args.length === 0) {
    out = new Float32Array([1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1]);
} else {
    out = new Float32Array(args);
}
return out;
}

function fromTransform (str) {
var r = str.match(/([\d.-]+(?!\w))+/g);

return new Array([
    r[0],   r[1],   r[2],   r[3],
    r[4],   r[5],   r[6],   r[7],
    r[8],   r[9],   r[10],  r[11],
    r[12],  r[13],  r[14],  r[15]
]);
}

function rotate(out, deg) {
var rad = deg2rad(deg),
    cos = Math.cos(rad),
    sin = Math.sin(rad);

out[0] = cos;
out[1] = sin;
out[4] = -sin;
out[5] = cos;
}

function rotateX(out, deg) {
var rad = deg2rad(deg),
    cos = Math.cos(rad),
    sin = Math.sin(rad);

out[5] = cos;
out[6] = sin;
out[9] = -sin;
out[10] = cos;
}

function rotateY(out, deg) {
var rad = deg2rad(deg),
    cos = Math.cos(rad),
    sin = Math.sin(rad);

out[0] = cos;
out[2] = sin;
out[8] = -sin;
out[10] = cos;
}

function rotateZ(out, deg) {
Matrix3D.rotate(out, deg);
}

【讨论】：

如果您提供一些文字说明，您的回答会更有帮助。