ssddi456 · August 29, 2015 13:58
diff --git a/index.html b/index.html
 <html>
 <body>
  
  <style>
    #bg,#test{
      width: 100px;
      height: 200px;
      background: #f00;
      border-top: 3px solid green;
      position: absolute;
      bottom : 300px;
      right  : 300px;
    }
    #bg{
      background: #000;
    }
    .point{
      position: absolute;
      width: 5px;
      height: 5px;
      background: yellow;
      top: 300px;
      left: 300px;
    }
    .point2{
      background: green;
    }
    .point3{
      border: 1px solid black;
      font-size: 1px;
    }
    .container{
      position: relative;
      width: 900px;
      height: 900px;
    }
  </style>

  <div class="container">
    <div id="bg"></div>
  </div>

  <div id="test"></div>

  <div id="bblt" class="point point3"></div>
  <script>
  function map ( arr, func) {
    var ret = [];
    for(var i = 0, n = arr.length; i < n; i++ ){
      ret.push(func.call(arr[i],arr[i],i, arr));
    }
    return ret;
  }


  function matrixMpos ( a/*pos*/, b/*matrix*/ ){
    var ret = [];
    ret[0] = a[0] * b[0][0] + a[1] * b[1][0];
    ret[1] = a[0] * b[0][1] + a[1] * b[1][1];
    return ret;
  }
  function matrixMmatrix( a, b ){
    var ret = [[],[]];
    ret[0][0] = a[0][0] * b[0][0] + a[0][1] * b[1][0];
    ret[0][1] = a[0][0] * b[0][1] + a[0][1] * b[1][1];

    ret[1][0] = a[1][0] * b[0][0] + a[1][1] * b[1][0];
    ret[1][1] = a[1][0] * b[0][1] + a[1][1] * b[1][1];
    return ret; 
  }
  (function(){
    
    var el = document.getElementById('test');

    var filterType = 'DXImageTransform.Microsoft.Matrix';
    var fullFilterType = 'progid:' + filterType;

    var currentFilter = el.style.filter;
    

    var filterIndex = currentFilter.indexOf(fullFilterType);
    if (currentFilter == '') {
      el.style.filter = fullFilterType;
    } else if (filterIndex < 0) {
      el.style.filter = currentFilter + ' ' + fullFilterType;
    }

    var poses = [
    [0,0],
    [100,0],
    [0,200],
    [100,200]
    ];
    function bbox ( cpos ){
      var xs = map(cpos,function( pos, idx ) {
                return pos[0];
               });
      var xy = map(cpos,function( pos, idx ) {
                return pos[1];
               });
      var ret = [
        Math.min.apply(Math,xs),
        Math.min.apply(Math,xy),
        Math.max.apply(Math,xs),
        Math.max.apply(Math,xy)
      ];
    }
    var center = [50,100];

    function setAngle ( angle, el) {
      

      var rad = angle * Math.PI / 180;
      var sinA = Math.sin(rad );
      var cosA = Math.cos(rad );

      var rotate = [[ cosA, -sinA ],
                    [ sinA,  cosA ]];
      var scale  = [[1,0],
                    [0,1]];
      var transformed= matrixMmatrix(rotate, scale);

      var cpos = map( poses,function( point, i ){
                  // matrix rotate;
                  var ret = matrixMpos(point,transformed);
                  return [ -ret[0],ret[1] ];
                });
      var cbb = bbox(cpos);

      var bblt = document.getElementById('bblt');

      // bblt.style.left = 300 + nposx;
      // bblt.style.top  = 300 + nposy;

      var ccenter = matrixMpos(center,transformed);

      var str = 
      ["filter:progid:DXImageTransform.Microsoft.Matrix(M11='" + transformed[0][0] + "', M12='" + transformed[0][1] + "', " +
                                                      "M21='"  + transformed[1][0] + "', M22='" + transformed[1][1] + "', " +
                                                      "SizingMethod='auto expand');",
        'margin-bottom:'+ -1*(bblt[3] + ccenter[1])+ 'px;',
        'margin-right:' + -1*(bblt[1] - ccenter[0])+ 'px;'].join('');
      el.style.cssText = str;
    }

    var angle = 0;
    var t = 1;
    var running  = true;
    setTimeout(function() {
      if( running ){
        setAngle(angle + 30 * t, el );
        t++;
        
      }
      setTimeout(arguments.callee, 300);
    }, 0);

      // setAngle(30, el );
  })();
  </script>
 </body>
 </html>
	<html>
	<body>

	<style>
	#bg,#test{
	width: 100px;
	height: 200px;
	background: #f00;
	border-top: 3px solid green;
	position: absolute;
	bottom : 300px;
	right : 300px;
	}
	#bg{
	background: #000;
	}
	.point{
	position: absolute;
	width: 5px;
	height: 5px;
	background: yellow;
	top: 300px;
	left: 300px;
	}
	.point2{
	background: green;
	}
	.point3{
	border: 1px solid black;
	font-size: 1px;
	}
	.container{
	position: relative;
	width: 900px;
	height: 900px;
	}
	</style>

	<div class="container">
	<div id="bg"></div>
	</div>

	<div id="test"></div>

	<div id="bblt" class="point point3"></div>
	<script>
	function map ( arr, func) {
	var ret = [];
	for(var i = 0, n = arr.length; i < n; i++ ){
	ret.push(func.call(arr[i],arr[i],i, arr));
	}
	return ret;
	}


	function matrixMpos ( a/pos/, b/matrix/ ){
	var ret = [];
	ret[0] = a[0] * b[0][0] + a[1] * b[1][0];
	ret[1] = a[0] * b[0][1] + a[1] * b[1][1];
	return ret;
	}
	function matrixMmatrix( a, b ){
	var ret = [[],[]];
	ret[0][0] = a[0][0] * b[0][0] + a[0][1] * b[1][0];
	ret[0][1] = a[0][0] * b[0][1] + a[0][1] * b[1][1];

	ret[1][0] = a[1][0] * b[0][0] + a[1][1] * b[1][0];
	ret[1][1] = a[1][0] * b[0][1] + a[1][1] * b[1][1];
	return ret;
	}
	(function(){

	var el = document.getElementById('test');

	var filterType = 'DXImageTransform.Microsoft.Matrix';
	var fullFilterType = 'progid:' + filterType;

	var currentFilter = el.style.filter;


	var filterIndex = currentFilter.indexOf(fullFilterType);
	if (currentFilter == '') {
	el.style.filter = fullFilterType;
	} else if (filterIndex < 0) {
	el.style.filter = currentFilter + ' ' + fullFilterType;
	}

	var poses = [
	[0,0],
	[100,0],
	[0,200],
	[100,200]
	];
	function bbox ( cpos ){
	var xs = map(cpos,function( pos, idx ) {
	return pos[0];
	});
	var xy = map(cpos,function( pos, idx ) {
	return pos[1];
	});
	var ret = [
	Math.min.apply(Math,xs),
	Math.min.apply(Math,xy),
	Math.max.apply(Math,xs),
	Math.max.apply(Math,xy)
	];
	}
	var center = [50,100];

	function setAngle ( angle, el) {


	var rad = angle * Math.PI / 180;
	var sinA = Math.sin(rad );
	var cosA = Math.cos(rad );

	var rotate = [[ cosA, -sinA ],
	[ sinA, cosA ]];
	var scale = [[1,0],
	[0,1]];
	var transformed= matrixMmatrix(rotate, scale);

	var cpos = map( poses,function( point, i ){
	// matrix rotate;
	var ret = matrixMpos(point,transformed);
	return [ -ret[0],ret[1] ];
	});
	var cbb = bbox(cpos);

	var bblt = document.getElementById('bblt');

	// bblt.style.left = 300 + nposx;
	// bblt.style.top = 300 + nposy;

	var ccenter = matrixMpos(center,transformed);

	var str =
	["filter:progid:DXImageTransform.Microsoft.Matrix(M11='" + transformed[0][0] + "', M12='" + transformed[0][1] + "', " +
	"M21='" + transformed[1][0] + "', M22='" + transformed[1][1] + "', " +
	"SizingMethod='auto expand');",
	'margin-bottom:'+ -1*(bblt[3] + ccenter[1])+ 'px;',
	'margin-right:' + -1*(bblt[1] - ccenter[0])+ 'px;'].join('');
	el.style.cssText = str;
	}

	var angle = 0;
	var t = 1;
	var running = true;
	setTimeout(function() {
	if( running ){
	setAngle(angle + 30 * t, el );
	t++;

	}
	setTimeout(arguments.callee, 300);
	}, 0);

	// setAngle(30, el );
	})();
	</script>
	</body>
	</html>