css matrix3d

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/numeric/1.2.6/numeric.min.js"></script>
<script src="https://dl.dropboxusercontent.com/u/4586796/stopExecutionOnTimeout.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<div class="box">
        Drag the points to transform the box!
</div>

CSS

.box {
          margin: 20px;
          padding: 20px;
          height: 200px;
          width: 200px;
          border: 1px solid black;
        }

        .points{
            width: 20px;
            height: 20px;
            border: 2px solid red;
            border-radius:20px;
            cursor: move;
            position: absolute;
            z-index: 100000;
        }

JavaScript

(function () {
            var $, applyTransform, getTransform, makeTransformable;
            $ = jQuery;
            getTransform = function (from, to) {
                var A, H, b, h, i, k, k_i, l, lhs, m, ref, rhs;
                console.assert(from.length === (ref = to.length) && ref === 4);
                A = [];
                for (i = k = 0; k < 4; i = ++k) {
                    if (window.CP.shouldStopExecution(1)) {
                        break;
                    }
                    A.push([
                        from[i].x,
                        from[i].y,
                        1,
                        0,
                        0,
                        0,
                        -from[i].x * to[i].x,
                        -from[i].y * to[i].x
                    ]);
                    A.push([
                        0,
                        0,
                        0,
                        from[i].x,
                        from[i].y,
                        1,
                        -from[i].x * to[i].y,
                        -from[i].y * to[i].y
                    ]);
                }
                window.CP.exitedLoop(1);
                b = [];
                for (i = l = 0; l < 4; i = ++l) {
                    if (window.CP.shouldStopExecution(2)) {
                        break;
                    }
                    b.push(to[i].x);
                    b.push(to[i].y);
                }
                window.CP.exitedLoop(2);
                h = numeric.solve(A, b);
                H = [
                    [
                        h[0],
                        h[1],
                        0,
                        h[2]
                    ],
                    [
                        h[3],
                        h[4],
                        0,
                        h[5]
                    ],
                    [
                        0,
                        0,
                       ...