jquery - Get number of CSS3 rotation cycles from matrix3d -

-

i trying rotate image using css3 rotatey. need angle of rotation using jquery.

my problem understanding how many cycles image has rotated.

example:

180 degrees: matrix3d(-1, 0, -0.00000000000000012246467991473532, 0, 0, 1, 0, 0, 0.00000000000000012246467991473532, 0, -1, 0, 0, 0, 0, 1)  360 degrees: matrix3d(1, 0, 0.00000000000000024492935982947064, 0, 0, 1, 0, 0, -0.00000000000000024492935982947064, 0, 1, 0, 0, 0, 0, 1) 540 degrees: matrix3d(-1, 0, -0.00000000000000036739403974420594, 0, 0, 1, 0, 0, 0.00000000000000036739403974420594, 0, -1, 0, 0, 0, 0, 1)  720 degrees: matrix3d(1, 0, 0.0000000000000004898587196589413, 0, 0, 1, 0, 0, -0.0000000000000004898587196589413, 0, 1, 0, 0, 0, 0, 1)

as can see each 180 degrees, absolute value of third element adds 0.00000000000000012246467991473532. satisfied result, @ point logic breaks , not apply more.

after 4th cycle numbers being added become random.

what correct way number of rotation cycles?

-------------------------- tl;dr --------------------------

function getrotationcycle (domelement, axis) {      var computedstyle = window.getcomputedstyle(domelement),         matrixstyle = computedstyle.transform || computedstyle.webkittransform || computedstyle.moztransform || computedstyle.mstransform || computedstyle.otransform || computedstyle.khtmltransform;      if (!matrixstyle || matrixstyle.substr(0, 9) !== 'matrix3d(') {         //return 0; //????         throw "something's wrong 3d transform style. no style applied @ or unknown css3 vendor or unknown/unsupported 3d matrix representation string or css3 3d transform not supported in browser";     }      var matrix = webkitcssmatrix && (new webkitcssmatrix(matrixstyle)) ||                   mozcssmatrix && (new mozcssmatrix(matrixstyle)) ||                   mscssmatrix && (new mscssmatrix(matrixstyle)) ||                   ocssmatrix && (new ocssmatrix(matrixstyle)) ||                       cssmatrix && (new cssmatrix(matrixstyle)));      if (!matrix || isnan(matrix.a) || isnan(matrix.b) || isnan(matrix.c)) {         //not sure versions of firefox         throw "could not catch cssmatrix constructor current browser, or constructor has returned non-standard matrix object (need [a b c] numerical properties work)";     }      var rotation;       // todo: giving axis array idea, or return 3 rotations if no parameter given      switch (axis.touppercase()) {         case 'x':             rotation = math.acos(matrix.a);             break;          case 'y':             rotation = math.asin(matrix.b);             break;          case 'z':             throw "todo: sorry, math people. need here! please implement case me. you: http://9elements.com/html5demos/matrix3d/";             //rotation = math.acos(matrix.a);             break;         default:             throw "this function accepts rotation axis name (string) first parameter. possible values: 'x', 'y', 'z'";      }      //if (isnan(rotation))...      rotation *= 180/math.pi; //getting rotation in degrees. me debug purposes bad performance, of course, ...      return rotation % 360; // ... can skip degrees , in radians }

some more great documentation given here: https://developer.mozilla.org, google , microsoft seems have nothing useful, apple has some.

everything has begun article: css3 converting matrix3d values. author starting point , math conversions.

but answer given there not complete, works in webkit only.

working code has been written in plain javascript because: - can copy-pasted environment - works bit (or much, depends) faster

if want jquery version, use snippet matrixstyle string.

var matrixstyle = element$.css('transform')) || element$.css('-webkit-transform')) || element$.css('-moz-transform')) || element$.css('-ms-transform')) || element$.css('-o-transform')); // jquery

each part of matrix explained here : http://9elements.com/html5demos/matrix3d/


Comments

Post a Comment

Popular posts from this blog

Perl - how to grep a block of text from a file -

-
it can in xml or text format. how in general grep block of text in perl? <track type="ws"> <range> <rangestart>0</rangestart> <rangeend>146.912</rangeend> <locationindex>0</locationindex> <propertyindex>0</propertyindex> </range> </track> <track type="ps" id="1"> <range> <rangestart>0</rangestart> <rangeend>146.912</rangeend> <locationindex>1</locationindex> <propertyindex>1</propertyindex> </range> </track> i want grep type="ps" , till </range> . one solution open file, read line line , match block. open(fh, "file.txt"); foreach $line (<fh>) { if ($line =~ m/type="cc"(.*?)<\/range>/) { print $1; } } but there more optimal solution without reading file line l
Read more

delphi - How to remove all the grips on a coolbar if I have several coolbands? -

-
Image
if set mycoolbar.fixedorder true,only grip on first band hidden. well,if use delphi 7 create vcl forms application,then put coolbar on , create 3 coolbans hold other controls,only grip , top coolbands can hidden setting mycoolbar.fixedorder:=true. i've uploaded picture make things clear. you got fixedorder property wrong. fixed property not allow bands rearranged if set true . setting property of coolbar true keep user changing bands order @ runtime, user can still move , resize bands. can give advice can do, actual solution problem, well, have wait answer. my advice use 3 coolbars in row , setting "fixedorder" property true , bandborderstyle bsnone . way grip hidden on of them. about property, it's not bug of ide, actual preference of property.
Read more

javascript - Animating array of divs; only the final element is modified -

-
this baffling me @ moment. i'm experienced programmer looking throw bit of surprise fiancee on countdown page our wedding. desired effect simulated confetti falling behind main page. setup follows: i have array of divs in javascript. each div absolutely positioned on page. have interval set updates every 50 or milliseconds. on each tick, run loop on array of divs, , calculations , update positions. problem problem having, however, though can see divs created, stored array, , modified (in case, each has slight randomized rotation) during initialization phase, once tick update position starts, div stored in whatever last slot of array gets position updated. tried hard-coding each div index testing purposes, strictly last element update position. upon printing current "left" , "top" style values each div before , after calculations shows value has been changed, no visible change noticeable. here's basic code: javascript var container;
Read more