Image Transform HTML Elements

Image transformation using only the HTML Elements

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://www.numericjs.com/lib/numeric-1.2.6.js"></script>
<div id="screen">
    <div id="transform">Transform</div>
    <div id="reset">Reset</div>
    <div id="background"></div>
    <div id="container1"><img id="image1" src="http://i.imgur.com/oTXztrn.png"/></div>
    <div id="container2"><img id="image2" src="http://i.imgur.com/4SlHc20.png"/></div>
    <div id="container3"><img id="image3" src="http://i.imgur.com/Prvckdo.png"/></div>
</div>

CSS

#screen {
    height: 960px;
    width: 500px;
    position: relative;
}

#transform {
    position: absolute;
    left: 550px;
    top: 0;
    cursor: pointer;
}

#reset {
    position: absolute;
    left: 650px;
    top: 0;
    cursor: pointer;
}

#image1 {
    position: absolute;
    left: 0;
    top: 0px;
    width: 300px;
    height: 195px;
    /*width: 700px;
    height: 456px;*/
    z-index: -5;
    opacity: 0.5;
    transform-origin: 0px 0px 0px; 
}

#image2 {
    position: absolute;
    left: 0;
    top: 0px;
    width: 300px;
    height: 194px;
    /*width: 700px;
    height: 454px;*/
    z-index: -5;
    transform-origin: 0px 0px 0px; 
    opacity: 0.5;
}

#image3 {
    position: absolute;
    left: 0;
    top: 0px;
    width: 300px;
    height: 200px;
    /*width: 700px;
    height: 466px;*/
    z-index: -5;
    transform-origin: 0px 0px 0px;
    opacity: 0.5;
}

#background {
    background-image: url("http://i.imgur.com/iHZZ6PB.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -10;
    width: 300px;
    height: 195px;
    /*width: 700px;
    height: 455px;*/
    transform: translate(400px, 250px);
}

#container1, #container2, #container3 {
    transform: translate(400px, 250px); 
}

/*
0.942653      -0.241088      0     225.201
0.10246       0.722719       0     48.4115
0             0              1     0
-0.00190844   -0.000927357   0     1
*/

JavaScript

/*var margin = {top: 50, right: 280, bottom: 50, left: 280},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;*/

/*

A - 300 194 (original)
B - 300 195
C - 300 194
D - 300 200

*/

var width = 700;//500;
var height = 456;//325;

var sourcePoints1 = [[0, 0], [$("#image1").width(), 0], [$("#image1").width(), $("#image1").height()], [0, $("#image1").height()]],
    sourcePoints2 = [[0, 0], [$("#image2").width(), 0], [$("#image2").width(), $("#image2").height()], [0, $("#image2").height()]],
    sourcePoints3 = [[0, 0], [$("#image3").width(), 0], [$("#image3").width(), $("#image3").height()], [0, $("#image3").height()]],
    targetPoints1 = [[-47.9207, 14.0534], [265.269, 30.1499], [250.197, 213.897], [-45.6952, 218.626]],
    targetPoints2 = [[45.8254, 15.8039], [447.001, -58.0346], [465.22, 287.676], [-7.28618, 173.703]],
    targetPoints3 = [[-383.514, -112.351], [46.7861, -80.2583], [46.9376, 144.418], [-253.398, 283.768]];    
 /*   
    targetPoints1 = [[-47.9207, 14.0534], [265.269, 30.1501], [250.197, 213.897], [-45.6952, 218.626]],
    targetPoints2 = [[45.8255, 15.8039], [447.001, -58.0345], [465.22, 287.674], [-7.28617, 173.703]],
    targetPoints3 = [[-247.075, -31.9574], [51.1851, -74.242], [45.8764, 142.456], [-172.671, 258.962]];*/
    /*targetPoints1 = [[-72.8394, 50.4481], [403.209, 108.231], [380.299, 767.835], [-69.4567, 784.812]],
    targetPoints2 = [[69.3492, 57.0244], [676.462, -209.403], [704.033, 1038], [-11.0264, 626.763]],
    targetPoints3 = [[-383.79, -111.851], [79.5075, -259.847], [71.2613, 498.597], [-268.215, 906.366]];*/

function transformed(sourcePoints, targetPoints, image) {  
  for (var a = [], b = [], i = 0, n = sourcePoints.length; i < n; ++i) {
    var s = sourcePoints[i], t = targetPoints[i];
    a.push([s[0], s[1], 1, 0, 0, 0, -s[0] * t[0], -s[1] * t[0]]), b.push(t[0]);
    a.push([0, 0, 0, s[0], s[1], 1, -s[0] * t[1], -s[1] * t[1]]), b.push(t[1]);
  }

  var X = numeric.solve(a,...