JSFiddle - React, Tailwind, and code Playground

by fezec

HTML

<script src="https://bitbucket.org/davidscherer/glowscript/raw/9597536c5c90df5a27d837b628f025a4f6dff5d8/libraries/sylvester.js"></script>
<div id="test"></div>

CSS

div{
  width:100px;
  height:100px;
  background:blue url("http://people.mozilla.com/~faaborg/files/shiretoko/firefoxIcon/firefox-512-noshadow.png") no-repeat left top;
  
  background-size:100% 100%;

}

JavaScript

var t=$("#test");
var originX= 100;
var originY=100;

function degToRads(deg){
return deg* Math.PI/180;
}
$(document).mousemove(function(e){
var rot=degToRads(parseInt((e.pageX/$(this).width())*360,10));

  var cos=Math.cos(rot)
  var sin=Math.sin(rot);


var identity=Matrix.Diagonal([1,1,1]);

var translationMatrix = $M([
  [1,0],
  [0,1],
  [0,0]
]);

var rotZMatrix = $M([
  [cos,sin],
  [-sin,cos],
  [0,0]
]);
  
  var finalMatrix=identity.x(translationMatrix).x(rotZMatrix);
  
  var useMatrix="matrix("+finalMatrix.e(1,1).toFixed(10)+","+finalMatrix.e(1,2).toFixed(10)+","
                +finalMatrix.e(2,1).toFixed(10)+","+finalMatrix.e(2,2).toFixed(10)+","+"0,0)";
  
  console.log(useMatrix)
  

  t.css("transform",useMatrix);
//  console.log(t.css("transform"));
  
  
  
});




/*
var cx = Math.cos(rotX);
var sx = Math.sin(rotX);
var cy = Math.cos(rotY);
var sy = Math.sin(rotY);
var cz = Math.cos(rotZ);
var sz = Math.sin(rotZ);

var rotXMatrix =$M([
  [1,0,0,0],
  [0,cx,sx,0],
  [0,-sx,cx,0],
  [0,0,0,1]
]);

var rotYMatrix = $M([
  [cy,0,-sy,0],
  [0,1,0,0],
  [sy,0,cy,0],
  [0,0,0,1]
]);

var rotZMatrix = $M([
  [cz,sz,0,0],
  [-sz,cz,0,0],
  [0,0,1,0],
  [0,0,0,1]
]);

var translationMatrix = $M([
  [1,0,0,0],
  [0,1,0,0],
  [0,0,1,0],
  [posX,posY,posZ,1]
]);    


var scaleMatrix=$M([
  [scale,0,0,0],
  [0,scale,0,0],
  [0,0,scale,0],
  [0,0,0,1]
]);

worldMatrix = Matrix.I(4);
worldMatrix = worldMatrix.x(rotXMatrix);
worldMatrix = worldMatrix.x(rotYMatrix);
worldMatrix = worldMatrix.x(rotZMatrix);
worldMatrix = worldMatrix.x(translationMatrix);
*/