2d Rotation with scale comparison

by fezec

HTML

<div id="two"></div>  

<div id="one"></div>

CSS

div{
  
  width:100px;
  height:100px;
  background:purple url("http://www.browser-watch.com/wp-content/uploads/2009/06/firefox-logo-full.png") no-repeat left top ;
  
  background-size:100% 100%;
  
  
  transform:matrix(-0.4480736161291701,-0.8939966636005579,0.8939966636005579,-0.4480736161291701,0,1);
  
 /* transform:matrix3d(1,1,0,0,
                    -1,1,0,0,
                     0,0,1,0,
                     0,0,0,1);
  */
}

#two{
   transform:matrix(0.8161641236267839,-1.8258905014552553,1.8258905014552553,0.8161641236267839,0,1);
}
}

JavaScript

var theta=-90;

function transform(angle,translationX,translatonY,scale){
return "("+Math.cos(angle)*scale +","+ Math.sin(angle)*scale+","+Math.sin(-angle)*scale +","+ Math.cos(angle)*scale+","+translationX+","+translatonY+")";
}

var img= new Image();
img.onload=onLoad;
img.src="http://www.browser-watch.com/wp-content/uploads/2009/06/firefox-logo-full.png";


function onLoad(){
  console.log("loaded");
$("one").css( "transform", "'matrix"+transform(theta,0,1,5)+"'");
}