Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery Element Free Rotation. Correcting Transform Origin and Translate in IE
    primarykey
    data
    text
    <p>I'm developing a jQuery plugin to make a block-level element rotatable with mouse. Now it works as expected in non-IE browsers, but have a strange behavior while rotating in Internet Explorer. </p> <p>Demo is hosted at <a href="http://testerski.antaranian.me" rel="nofollow">testerski.antaranian.me</a> here, rotation plugin script is </p> <pre><code> $.fn.roll = function(angle){ var $this = this, ie = !jQuery.support.leadingWhitespace; if (ie) { var cosAngle = parseFloat(parseFloat(Math.cos(angle.rad())).toFixed(8)), sinAngle = parseFloat(parseFloat(Math.sin(angle.rad())).toFixed(8)), tx = 0, ty = 0, matrixFilter = '(M11=' + cosAngle + ', ' + 'M12=' + -sinAngle + ', ' + 'M21=' + sinAngle + ', ' + 'M22=' + cosAngle + ',' + 'sizingMethod=\'auto expand\')', filter = 'progid:DXImageTransform.Microsoft.Matrix' + matrixFilter, css = { '-ms-filter': filter, 'filter': filter }; debug.log(filter); var matrix = $M([ [cosAngle, -sinAngle, tx], [sinAngle, cosAngle, ty], [0, 0, 1] ]); debug.log(matrix); $this.transformOrigin(matrix); $this.fixIeBoundaryBug(matrix); } else { var css = { '-webkit-transform': 'rotate(' + angle + 'deg)', '-moz-transform': 'rotate(' + angle + 'deg)', '-o-transform': 'rotate(' + angle + 'deg)' }; } $this.css(css); return this; }; </code></pre> <p>I googled and found these two pages related to this subject</p> <p><a href="https://github.com/heygrady/transform/wiki/correcting-transform-origin-and-translate-in-ie" rel="nofollow" title="Grady's guide">Grady's guide</a> and <a href="http://www.useragentman.com/blog/2010/03/09/cross-browser-css-transforms-even-in-ie/" rel="nofollow">Zoltan's guide</a></p> <p>As I get there are some accounting needed related to Linear Algebra, but it's hard for me so if anyone have more simple tutorial, or knows the direct solution, please let me know.</p> <p>Any help would be appreciated, Antaranian.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload