如何在matrix3d上获得缩放(x，y，z)和旋转(x，y，z)？

<style>
    .box {
        width: 100px;
        height: 100px;
        background-color: red;
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
</style>

<div class="box"></div>

<script>
    var scale = { x: 2, y: 2, z: 1 };
    var rotation = { x: 45, y: 45, z: 45 };

    var matrix = [
        scale.x, 0, 0, 0,
        0, scale.y, 0, 0,
        0, 0, scale.z, 0,
        0, 0, 0, 1
    ];

    var radianX = rotation.x * Math.PI / 180;
    var radianY = rotation.y * Math.PI / 180;
    var radianZ = rotation.z * Math.PI / 180;

    var rotationMatrixX = [
        1, 0, 0, 0,
        0, Math.cos(radianX), -Math.sin(radianX), 0,
        0, Math.sin(radianX), Math.cos(radianX), 0,
        0, 0, 0, 1
    ];

    var rotationMatrixY = [
        Math.cos(radianY), 0, Math.sin(radianY), 0,
        0, 1, 0, 0,
        -Math.sin(radianY), 0, Math.cos(radianY), 0,
        0, 0, 0, 1
    ];

    var rotationMatrixZ = [
        Math.cos(radianZ), -Math.sin(radianZ), 0, 0,
        Math.sin(radianZ), Math.cos(radianZ), 0, 0,
        0, 0, 1, 0,
        0, 0, 0, 1
    ];

    matrix = multiplyMatrix(matrix, rotationMatrixX);
    matrix = multiplyMatrix(matrix, rotationMatrixY);
    matrix = multiplyMatrix(matrix, rotationMatrixZ);

    var transformValue = 'matrix3d(' + matrix.join(',') + ')';
    document.querySelector('.box').style.transform = transformValue;

    function multiplyMatrix(a, b) {
        var result = [];
        for (var i = 0; i < 4; i++) {
            for (var j = 0; j < 4; j++) {
                var sum = 0;
                for (var k = 0; k < 4; k++) {
                    sum += a[i * 4 + k] * b[k * 4 + j];
                }
                result.push(sum);
            }
        }
        return result;
    }
</script>