js计算matrix 实现transform

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            margin: auto;
            background: red;
            width: 400px;

        }
    </style>
</head>

<body>
    <div id='move-me' class='transformable'>
        <h2>Move me with a matrix</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
    </div>
</body>
<script>

    function mtrMultMtr(matrixA, matrixB) {

        let res = [];
        let b = 0;
        for (let k = 0; k < 16; k++) {
            let a = Math.floor(k / 4);
            let n = 0;

            for (let j = 0; j < 16; j += 4) {
                n += matrixA[a + j] * matrixB[b + j];
            }
            b++;
            if (b == 4) b = 0;
            res.push(n)
        }
        return res;
    }



    function scale(x, y, z) {
        return [
            x, 0, 0, 0,
            0, y, 0, 0,
            0, 0, z, 0,
            0, 0, 0, 1
        ];
    }
    function translate(x, y, z) {
        return [
            1, 0, 0, 0,
            0, 1, 0, 0,
            0, 0, 1, 0,
            x, y, z, 1
        ];
    }

    function rotate(x, y, z) {
        let mixMatrix =  mtrMultMtr( rotateX(x), rotateY(y));
        return  mtrMultMtr( mixMatrix, rotateZ(z));
    }
    function rotateX(a) {

        return [
            1, 0, 0, 0,
            0, Math.cos(a), -Math.sin(a), 0,
            0, Math.sin(a), Math.cos(a), 0,
            0, 0, 0, 1
        ];
    }

    function rotateY(a) {

        return [
            Math.cos(a), 0, Math.sin(a), 0,
            0, 1, 0, 0,
            -Math.sin(a), 0, Math.cos(a), 0,
            0, 0, 0, 1
        ];
    }

    function rotateZ(a) {

        return [
            Math.cos(a), -Math.sin(a), 0, 0,
            Math.sin(a), Math.cos(a), 0, 0,
            0, 0, 1, 0,
            0, 0, 0, 1
        ];
    }



    function matrixArrayToCssMatrix(array) {
        return "matrix3d(" + array.join(',') + ")";
    }

    const moveMe = document.body.querySelector('#move-me');
    const deg = Math.PI / 180;
    const matrix = mtrMultMtr(  scale(0.5,0.5, 1) , rotate(0, 0, 45 * deg));

    moveMe.style.transform = matrixArrayToCssMatrix(matrix)

</script>

</html>
js计算matrix 实现transform

猜你喜欢
