requirebin sketch

index.js

var cssTransformToMatrix = require('css-transform-to-mat4');
var containerTest = document.createElement('div');

document.body.style[ 'text-align' ] = 'right';
document.body.style[ 'font-family' ] = 'Helvetica, sans serif';
document.body.style.width = '100%';
document.body.style.height = '100%';
document.body.style.margin = '0';

containerTest.style.height = window.innerHeight + 'px';
containerTest.style.overflow = 'scroll';

document.body.appendChild(containerTest);

createTest('none');
createTest('initial');

createTest('matrix(0.5, 0, 0, 0.5, 0, 0)');
createTest('matrix(0.353553390593274, 0.353553390593274, 0, -0.0707106781186548, 0.0707106781186548, 0)');
createTest('matrix3d(0.766044443118978, 0.642787609686539, 0, 0, -0.642787609686539, 0.766044443118978, 0, 0, 0, 0, 1, 0, 63.748692118167, 20.5996498310335, 0, 1)');
createTest('translate(40px, 20px)');
createTest('translateX(40px)');
createTest('translateY(40px)');
createTest('rotate(20deg)');
createTest('scale(0.5, 0.5)');
createTest('scaleX(0.5)');
createTest('scaleY(0.5)');
createTest('skew(30deg, 20deg)');
createTest('skewX(30deg)');
createTest('skewY(30deg)');
createTest('skewY(30deg)');
createTest('perspective(1000px) translate3d(40px, 20px, -1000px)');
createTest('translate3d(40px, 20px, -1000px)', true);
createTest('translateZ(-1000px)', true);
createTest('scale3d(0.5, 0.35, 0.3)', true);
createTest('scaleZ(0.3)', true);
createTest('rotateX(45deg)', true);
createTest('rotateY(45deg)', true);
createTest('rotateZ(45deg)', true);
createTest('rotate3d(1, 1, 0, 45deg)', true);
createTest('rotate(45deg) scale(0.5, 0.1)');
createTest('translateZ(-1000px) scale(1, 1.3) rotateX(30deg) scaleZ(0.5)', true);

function createTest(transform, addPerspective) {

  var container = document.createElement('div');
  var leftParent = getParent();
  var rightParent = getParent();
  var left = getToTransform('#CAFE00');
  var right = getToTransform('#00BABE');

  container.style.width = '100%';
  container.style.height = '200px';
  container.style.margin = '30px 0px 30px 0px';
  container.style.position = 'relative';

  rightParent.style.left = '50%';

  if(!addPerspective) {
    left.style.transform = transform;
    right.style.transform = 'matrix3d(' + ( cssTransformToMatrix(transform).join(',') ) + ')';
  } else {
    left.style.transform = 'perspective(1000px) ' + transform;
    right.style.transform = 'perspective(1000px) matrix3d(' + ( cssTransformToMatrix(transform).join(',') ) + ')';
  }
  

  container.innerHTML = transform;


  leftParent.appendChild(left);
  rightParent.appendChild(right);
  container.appendChild(leftParent);
  container.appendChild(rightParent);
  containerTest.appendChild(container);
}

function getParent() {
  var el = document.createElement('div');

  el.style.position = 'absolute';
  el.style.width = '50%';
  el.style.height = '200px';
  el.style.border = '1px solid #999';

  return el;
}

function getToTransform(colour) {

  var el = document.createElement('div');

  el.style.position = 'absolute';
  el.style.left = '0px';
  el.style.top = '0px';
  el.style.background = colour;
  el.style.width = '100px';
  el.style.height = '100px';

  return el;
}

minified.js

require=function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s}({1:[function(require,module,exports){module.exports=multiply;function multiply(out,a,b){var a00=a[0],a01=a[1],a02=a[2],a03=a[3],a10=a[4],a11=a[5],a12=a[6],a13=a[7],a20=a[8],a21=a[9],a22=a[10],a23=a[11],a30=a[12],a31=a[13],a32=a[14],a33=a[15];var b0=b[0],b1=b[1],b2=b[2],b3=b[3];out[0]=b0*a00+b1*a10+b2*a20+b3*a30;out[1]=b0*a01+b1*a11+b2*a21+b3*a31;out[2]=b0*a02+b1*a12+b2*a22+b3*a32;out[3]=b0*a03+b1*a13+b2*a23+b3*a33;b0=b[4];b1=b[5];b2=b[6];b3=b[7];out[4]=b0*a00+b1*a10+b2*a20+b3*a30;out[5]=b0*a01+b1*a11+b2*a21+b3*a31;out[6]=b0*a02+b1*a12+b2*a22+b3*a32;out[7]=b0*a03+b1*a13+b2*a23+b3*a33;b0=b[8];b1=b[9];b2=b[10];b3=b[11];out[8]=b0*a00+b1*a10+b2*a20+b3*a30;out[9]=b0*a01+b1*a11+b2*a21+b3*a31;out[10]=b0*a02+b1*a12+b2*a22+b3*a32;out[11]=b0*a03+b1*a13+b2*a23+b3*a33;b0=b[12];b1=b[13];b2=b[14];b3=b[15];out[12]=b0*a00+b1*a10+b2*a20+b3*a30;out[13]=b0*a01+b1*a11+b2*a21+b3*a31;out[14]=b0*a02+b1*a12+b2*a22+b3*a32;out[15]=b0*a03+b1*a13+b2*a23+b3*a33;return out}},{}],2:[function(require,module,exports){module.exports=rotate;function rotate(out,a,rad,axis){var x=axis[0],y=axis[1],z=axis[2],len=Math.sqrt(x*x+y*y+z*z),s,c,t,a00,a01,a02,a03,a10,a11,a12,a13,a20,a21,a22,a23,b00,b01,b02,b10,b11,b12,b20,b21,b22;if(Math.abs(len)<1e-6){return null}len=1/len;x*=len;y*=len;z*=len;s=Math.sin(rad);c=Math.cos(rad);t=1-c;a00=a[0];a01=a[1];a02=a[2];a03=a[3];a10=a[4];a11=a[5];a12=a[6];a13=a[7];a20=a[8];a21=a[9];a22=a[10];a23=a[11];b00=x*x*t+c;b01=y*x*t+z*s;b02=z*x*t-y*s;b10=x*y*t-z*s;b11=y*y*t+c;b12=z*y*t+x*s;b20=x*z*t+y*s;b21=y*z*t-x*s;b22=z*z*t+c;out[0]=a00*b00+a10*b01+a20*b02;out[1]=a01*b00+a11*b01+a21*b02;out[2]=a02*b00+a12*b01+a22*b02;out[3]=a03*b00+a13*b01+a23*b02;out[4]=a00*b10+a10*b11+a20*b12;out[5]=a01*b10+a11*b11+a21*b12;out[6]=a02*b10+a12*b11+a22*b12;out[7]=a03*b10+a13*b11+a23*b12;out[8]=a00*b20+a10*b21+a20*b22;out[9]=a01*b20+a11*b21+a21*b22;out[10]=a02*b20+a12*b21+a22*b22;out[11]=a03*b20+a13*b21+a23*b22;if(a!==out){out[12]=a[12];out[13]=a[13];out[14]=a[14];out[15]=a[15]}return out}},{}],3:[function(require,module,exports){module.exports=rotateX;function rotateX(out,a,rad){var s=Math.sin(rad),c=Math.cos(rad),a10=a[4],a11=a[5],a12=a[6],a13=a[7],a20=a[8],a21=a[9],a22=a[10],a23=a[11];if(a!==out){out[0]=a[0];out[1]=a[1];out[2]=a[2];out[3]=a[3];out[12]=a[12];out[13]=a[13];out[14]=a[14];out[15]=a[15]}out[4]=a10*c+a20*s;out[5]=a11*c+a21*s;out[6]=a12*c+a22*s;out[7]=a13*c+a23*s;out[8]=a20*c-a10*s;out[9]=a21*c-a11*s;out[10]=a22*c-a12*s;out[11]=a23*c-a13*s;return out}},{}],4:[function(require,module,exports){module.exports=rotateY;function rotateY(out,a,rad){var s=Math.sin(rad),c=Math.cos(rad),a00=a[0],a01=a[1],a02=a[2],a03=a[3],a20=a[8],a21=a[9],a22=a[10],a23=a[11];if(a!==out){out[4]=a[4];out[5]=a[5];out[6]=a[6];out[7]=a[7];out[12]=a[12];out[13]=a[13];out[14]=a[14];out[15]=a[15]}out[0]=a00*c-a20*s;out[1]=a01*c-a21*s;out[2]=a02*c-a22*s;out[3]=a03*c-a23*s;out[8]=a00*s+a20*c;out[9]=a01*s+a21*c;out[10]=a02*s+a22*c;out[11]=a03*s+a23*c;return out}},{}],5:[function(require,module,exports){module.exports=rotateZ;function rotateZ(out,a,rad){var s=Math.sin(rad),c=Math.cos(rad),a00=a[0],a01=a[1],a02=a[2],a03=a[3],a10=a[4],a11=a[5],a12=a[6],a13=a[7];if(a!==out){out[8]=a[8];out[9]=a[9];out[10]=a[10];out[11]=a[11];out[12]=a[12];out[13]=a[13];out[14]=a[14];out[15]=a[15]}out[0]=a00*c+a10*s;out[1]=a01*c+a11*s;out[2]=a02*c+a12*s;out[3]=a03*c+a13*s;out[4]=a10*c-a00*s;out[5]=a11*c-a01*s;out[6]=a12*c-a02*s;out[7]=a13*c-a03*s;return out}},{}],6:[function(require,module,exports){module.exports=scale;function scale(out,a,v){var x=v[0],y=v[1],z=v[2];out[0]=a[0]*x;out[1]=a[1]*x;out[2]=a[2]*x;out[3]=a[3]*x;out[4]=a[4]*y;out[5]=a[5]*y;out[6]=a[6]*y;out[7]=a[7]*y;out[8]=a[8]*z;out[9]=a[9]*z;out[10]=a[10]*z;out[11]=a[11]*z;out[12]=a[12];out[13]=a[13];out[14]=a[14];out[15]=a[15];return out}},{}],7:[function(require,module,exports){module.exports=translate;function translate(out,a,v){var x=v[0],y=v[1],z=v[2],a00,a01,a02,a03,a10,a11,a12,a13,a20,a21,a22,a23;if(a===out){out[12]=a[0]*x+a[4]*y+a[8]*z+a[12];out[13]=a[1]*x+a[5]*y+a[9]*z+a[13];out[14]=a[2]*x+a[6]*y+a[10]*z+a[14];out[15]=a[3]*x+a[7]*y+a[11]*z+a[15]}else{a00=a[0];a01=a[1];a02=a[2];a03=a[3];a10=a[4];a11=a[5];a12=a[6];a13=a[7];a20=a[8];a21=a[9];a22=a[10];a23=a[11];out[0]=a00;out[1]=a01;out[2]=a02;out[3]=a03;out[4]=a10;out[5]=a11;out[6]=a12;out[7]=a13;out[8]=a20;out[9]=a21;out[10]=a22;out[11]=a23;out[12]=a00*x+a10*y+a20*z+a[12];out[13]=a01*x+a11*y+a21*z+a[13];out[14]=a02*x+a12*y+a22*z+a[14];out[15]=a03*x+a13*y+a23*z+a[15]}return out}},{}],"css-transform-to-mat4":[function(require,module,exports){var mat4RotateX=require("gl-mat4/rotateX");var mat4RotateY=require("gl-mat4/rotateY");var mat4RotateZ=require("gl-mat4/rotateZ");var mat4Rotate=require("gl-mat4/rotate");var mat4Scale=require("gl-mat4/scale");var mat4Translate=require("gl-mat4/translate");var mat4Multiply=require("gl-mat4/multiply");module.exports=function cssTransformToMatrix(value){var functions=value.match(/[A-z3]+\([^\)]+/g)||[];var outMatrix=createMatrix();var matrices=[];functions.forEach(function(func){var split=func.split("(");var name=split[0];var value=split[1];var matrix;switch(name){case"matrix":value=value.split(",").map(Number.parseFloat);matrix=[value[0],value[1],0,0,value[2],value[3],0,0,0,0,1,0,value[4],value[5],0,1];break;case"matrix3d":matrix=value.split(",").map(Number.parseFloat);break;case"translate":case"translate3d":matrix=createMatrix();value=value.split(",").map(Number.parseFloat);if(value.length===2){value.push(0)}mat4Translate(matrix,matrix,value);break;case"translateX":matrix=createMatrix();value=[Number.parseFloat(value),0,0];mat4Translate(matrix,matrix,value);break;case"translateY":matrix=createMatrix();value=[0,Number.parseFloat(value),0];mat4Translate(matrix,matrix,value);break;case"translateZ":matrix=createMatrix();value=[0,0,Number.parseFloat(value)];mat4Translate(matrix,matrix,value);break;case"rotate":case"rotateZ":matrix=createMatrix();value=getRadian(value);mat4RotateZ(matrix,matrix,value);break;case"scale":case"scale3d":matrix=createMatrix();value=value.split(",").map(Number.parseFloat);if(value.length===2){value.push(1)}mat4Scale(matrix,matrix,value);break;case"scaleX":matrix=createMatrix();mat4Scale(matrix,matrix,[Number.parseFloat(value),1,1]);break;case"scaleY":matrix=createMatrix();mat4Scale(matrix,matrix,[1,Number.parseFloat(value),1]);break;case"scaleZ":matrix=createMatrix();mat4Scale(matrix,matrix,[1,1,Number.parseFloat(value)]);break;case"rotateX":matrix=createMatrix();value=getRadian(value);mat4RotateX(matrix,matrix,value);break;case"rotateY":matrix=createMatrix();value=getRadian(value);mat4RotateY(matrix,matrix,value);break;case"rotate3d":matrix=createMatrix();value=value.split(",");mat4Rotate(matrix,matrix,getRadian(value[3]),value.slice(0,3).map(Number.parseFloat));break;case"perspective":value=Number.parseFloat(value);matrix=[1,0,0,0,0,1,0,0,0,0,1,-1/value,0,0,0,1];break;case"skew":matrix=createMatrix();value=value.split(",").map(getRadian);matrix=[1,Math.tan(value[0]),0,0,Math.tan(value[1]),1,0,0,0,0,1,0,0,0,0,1];break;case"skewX":matrix=createMatrix();value=getRadian(value);matrix=[1,0,0,0,Math.tan(value),1,0,0,0,0,1,0,0,0,0,1];break;case"skewY":matrix=createMatrix();value=getRadian(value);matrix=[1,Math.tan(value),0,0,0,1,0,0,0,0,1,0,0,0,0,1];break;case"none":case"initial":break;default:throw new Error("unsupported transform function: "+name);break}if(matrix){mat4Multiply(outMatrix,outMatrix,matrix)}});return outMatrix};function getRadian(value){if(value.indexOf("deg")!=-1){return parseFloat(value,10)*(Math.PI*2/360)}else if(value.indexOf("grad")!=-1){return parseFloat(value,10)*(Math.PI/200)}else{return parseFloat(value,10)}}function createMatrix(){return[1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1]}},{"gl-mat4/multiply":1,"gl-mat4/rotate":2,"gl-mat4/rotateX":3,"gl-mat4/rotateY":4,"gl-mat4/rotateZ":5,"gl-mat4/scale":6,"gl-mat4/translate":7}]},{},[]);var cssTransformToMatrix=require("css-transform-to-mat4");var containerTest=document.createElement("div");document.body.style["text-align"]="right";document.body.style["font-family"]="Helvetica, sans serif";document.body.style.width="100%";document.body.style.height="100%";document.body.style.margin="0";containerTest.style.height=window.innerHeight+"px";containerTest.style.overflow="scroll";document.body.appendChild(containerTest);createTest("none");createTest("initial");createTest("matrix(0.5, 0, 0, 0.5, 0, 0)");createTest("matrix(0.353553390593274, 0.353553390593274, 0, -0.0707106781186548, 0.0707106781186548, 0)");createTest("matrix3d(0.766044443118978, 0.642787609686539, 0, 0, -0.642787609686539, 0.766044443118978, 0, 0, 0, 0, 1, 0, 63.748692118167, 20.5996498310335, 0, 1)");createTest("translate(40px, 20px)");createTest("translateX(40px)");createTest("translateY(40px)");createTest("rotate(20deg)");createTest("scale(0.5, 0.5)");createTest("scaleX(0.5)");createTest("scaleY(0.5)");createTest("skew(30deg, 20deg)");createTest("skewX(30deg)");createTest("skewY(30deg)");createTest("skewY(30deg)");createTest("perspective(1000px) translate3d(40px, 20px, -1000px)");createTest("translate3d(40px, 20px, -1000px)",true);createTest("translateZ(-1000px)",true);createTest("scale3d(0.5, 0.35, 0.3)",true);createTest("scaleZ(0.3)",true);createTest("rotateX(45deg)",true);createTest("rotateY(45deg)",true);createTest("rotateZ(45deg)",true);createTest("rotate3d(1, 1, 0, 45deg)",true);createTest("rotate(45deg) scale(0.5, 0.1)");createTest("translateZ(-1000px) scale(1, 1.3) rotateX(30deg) scaleZ(0.5)",true);function createTest(transform,addPerspective){var container=document.createElement("div");var leftParent=getParent();var rightParent=getParent();var left=getToTransform("#CAFE00");var right=getToTransform("#00BABE");container.style.width="100%";container.style.height="200px";container.style.margin="30px 0px 30px 0px";container.style.position="relative";rightParent.style.left="50%";if(!addPerspective){left.style.transform=transform;right.style.transform="matrix3d("+cssTransformToMatrix(transform).join(",")+")"}else{left.style.transform="perspective(1000px) "+transform;right.style.transform="perspective(1000px) matrix3d("+cssTransformToMatrix(transform).join(",")+")"}container.innerHTML=transform;leftParent.appendChild(left);rightParent.appendChild(right);container.appendChild(leftParent);container.appendChild(rightParent);containerTest.appendChild(container)}function getParent(){var el=document.createElement("div");el.style.position="absolute";el.style.width="50%";el.style.height="200px";el.style.border="1px solid #999";return el}function getToTransform(colour){var el=document.createElement("div");el.style.position="absolute";el.style.left="0px";el.style.top="0px";el.style.background=colour;el.style.width="100px";el.style.height="100px";return el}

package.json

{
  "name": "requirebin-sketch",
  "version": "1.0.0",
  "dependencies": {
    "css-transform-to-mat4": "1.0.0"
  }
}

page-body.html

<!-- contents of this file will be placed inside the <body> -->

page-head.html

<!-- contents of this file will be placed inside the <head> -->

requirebin.md

made with requirebin