[ { "path": "README.md", "content": "jquery.transform2d.js adds 2d transform capabilities to jQuery `css()` and `animate()` functions.\n\n[Demo](http://louisremi.github.com/jquery.transform.js/index.html)\n\nUsage:\n======\n\nSet transform with a string\n---------------------------\n\n $(elem).css('transform', 'translate(50px, 30px) rotate(25deg) scale(2,.5) skewX(-35deg)');\n $(elem).animate({transform: 'translateY(-100px) rotate(1rad) scaleX(2) skewY(42deg)'});\n\nYou can use the following list of transform functions: \n- `translateX(px)` \n- `translateY(px)` \n- combined: `translate(px, px)` *the second number is optional and defaults to 0* \n- `scaleX()` \n- `scaleY()` \n- combined: `scale(, )` *the second number is optional and defaults to the value of the first one* \n- `rotate()` *units for angles are *rad* (default), *deg* or *grad*.* \n- `skewX()` \n- `skewY()` \n- `matrix(, , , , , )`*\n\n*`matrix` gives you more control about the resulting transformation, using a [matrix construction set](http://www.useragentman.com/matrix/). \nWhen using it in animations however, it makes it impossible to predict how the current and target transformations are going to be interpolated; there is no way to tell whether elements are going to rotate clockwise or anti-clockwise for instance.\n\nGet transform\n-------------\n\nreturns a computed transform matrix.\n\n $(elem).css('transform') == 'matrix(0,1,-1,0,100,50)';\n\nRelative animations\n-------------------\n\nRelative animations are possible by prepending \"+=\" to the transform string.\n\n $(elem).css('transform', 'rotate(45deg)');\n // using the following syntax, elem will always rotate 90deg anticlockwise\n $(elem).animate({transform: '+=rotate(-90deg)'});\n\nLimitations:\n============\n\n- requires jQuery 1.4.3+,\n- Should you use the *translate* property, then your elements need to be absolutely positionned in a relatively positionned wrapper **or it will fail in IE**,\n- transformOrigin is not accessible.\n\nWhy such restrictions with 'translate'?\n---------------------------------------\n\nSince translate is unavailable in IE<9, we have to emulate it using *top* and *left* properties of the element style. \nThis can, of course, only work if the elements are absolutely positionned in a relatively positionned wrapper. \n\nOther plugins position the elements and wrap them transparently. \nI think that transparently messing with the DOM often introduces unpredictible behavior. \nUnpredictible behavior leads developpers to fear plugins. \n*Fear leads to anger. Anger leads to hate. Hate leads to suffering.* \nI prefer leaving this up to you.\n\nLicense\n=======\n\nDual licensed under GPL and MIT licenses.\n\nCopyright (c) 2010 [Louis-Rémi Babé](http://twitter.com/louis_remi)." }, { "path": "bower.json", "content": "{\n \"name\":\"jquery.transform.js\",\n \"version\":\"1.0.0\",\n \"main\": [\n \"jquery.transform2d.js\",\n \"jquery.transform3d.js\"\n ],\n \"description\":\"\",\n \"license\":\"Dual licensed under GPL and MIT licenses.\",\n \"ignore\":[\n ],\n \"dependencies\":{\n \"jquery\":\"~1.7.2\"\n },\n \"devDependencies\":{}\n}\n" }, { "path": "jquery.transform2d.js", "content": "/*\n * transform: A jQuery cssHooks adding cross-browser 2d transform capabilities to $.fn.css() and $.fn.animate()\n *\n * limitations:\n * - requires jQuery 1.4.3+\n * - Should you use the *translate* property, then your elements need to be absolutely positionned in a relatively positionned wrapper **or it will fail in IE678**.\n * - transformOrigin is not accessible\n *\n * latest version and complete README available on Github:\n * https://github.com/louisremi/jquery.transform.js\n *\n * Copyright 2011 @louis_remi\n * Licensed under the MIT license.\n *\n * This saved you an hour of work?\n * Send me music http://www.amazon.co.uk/wishlist/HNTU0468LQON\n *\n */\n(function( $, window, document, Math, undefined ) {\n\n/*\n * Feature tests and global variables\n */\nvar div = document.createElement(\"div\"),\n\tdivStyle = div.style,\n\tsuffix = \"Transform\",\n\ttestProperties = [\n\t\t\"O\" + suffix,\n\t\t\"ms\" + suffix,\n\t\t\"Webkit\" + suffix,\n\t\t\"Moz\" + suffix\n\t],\n\ti = testProperties.length,\n\tsupportProperty,\n\tsupportMatrixFilter,\n\tsupportFloat32Array = \"Float32Array\" in window,\n\tpropertyHook,\n\tpropertyGet,\n\trMatrix = /Matrix([^)]*)/,\n\trAffine = /^\\s*matrix\\(\\s*1\\s*,\\s*0\\s*,\\s*0\\s*,\\s*1\\s*(?:,\\s*0(?:px)?\\s*){2}\\)\\s*$/,\n\t_transform = \"transform\",\n\t_transformOrigin = \"transformOrigin\",\n\t_translate = \"translate\",\n\t_rotate = \"rotate\",\n\t_scale = \"scale\",\n\t_skew = \"skew\",\n\t_matrix = \"matrix\";\n\n// test different vendor prefixes of these properties\nwhile ( i-- ) {\n\tif ( testProperties[i] in divStyle ) {\n\t\t$.support[_transform] = supportProperty = testProperties[i];\n\t\t$.support[_transformOrigin] = supportProperty + \"Origin\";\n\t\tcontinue;\n\t}\n}\n// IE678 alternative\nif ( !supportProperty ) {\n\t$.support.matrixFilter = supportMatrixFilter = divStyle.filter === \"\";\n}\n\n// px isn't the default unit of these properties\n$.cssNumber[_transform] = $.cssNumber[_transformOrigin] = true;\n\n/*\n * fn.css() hooks\n */\nif ( supportProperty && supportProperty != _transform ) {\n\t// Modern browsers can use jQuery.cssProps as a basic hook\n\t$.cssProps[_transform] = supportProperty;\n\t$.cssProps[_transformOrigin] = supportProperty + \"Origin\";\n\n\t// Firefox needs a complete hook because it stuffs matrix with \"px\"\n\tif ( supportProperty == \"Moz\" + suffix ) {\n\t\tpropertyHook = {\n\t\t\tget: function( elem, computed ) {\n\t\t\t\treturn (computed ?\n\t\t\t\t\t// remove \"px\" from the computed matrix\n\t\t\t\t\t$.css( elem, supportProperty ).split(\"px\").join(\"\"):\n\t\t\t\t\telem.style[supportProperty]\n\t\t\t\t);\n\t\t\t},\n\t\t\tset: function( elem, value ) {\n\t\t\t\t// add \"px\" to matrices\n\t\t\t\telem.style[supportProperty] = /matrix\\([^)p]*\\)/.test(value) ?\n\t\t\t\t\tvalue.replace(/matrix((?:[^,]*,){4})([^,]*),([^)]*)/, _matrix+\"$1$2px,$3px\"):\n\t\t\t\t\tvalue;\n\t\t\t}\n\t\t};\n\t/* Fix two jQuery bugs still present in 1.5.1\n\t * - rupper is incompatible with IE9, see http://jqbug.com/8346\n\t * - jQuery.css is not really jQuery.cssProps aware, see http://jqbug.com/8402\n\t */\n\t} else if ( /^1\\.[0-5](?:\\.|$)/.test($.fn.jquery) ) {\n\t\tpropertyHook = {\n\t\t\tget: function( elem, computed ) {\n\t\t\t\treturn (computed ?\n\t\t\t\t\t$.css( elem, supportProperty.replace(/^ms/, \"Ms\") ):\n\t\t\t\t\telem.style[supportProperty]\n\t\t\t\t);\n\t\t\t}\n\t\t};\n\t}\n\t/* TODO: leverage hardware acceleration of 3d transform in Webkit only\n\telse if ( supportProperty == \"Webkit\" + suffix && support3dTransform ) {\n\t\tpropertyHook = {\n\t\t\tset: function( elem, value ) {\n\t\t\t\telem.style[supportProperty] = \n\t\t\t\t\tvalue.replace();\n\t\t\t}\n\t\t}\n\t}*/\n\n} else if ( supportMatrixFilter ) {\n\tpropertyHook = {\n\t\tget: function( elem, computed, asArray ) {\n\t\t\tvar elemStyle = ( computed && elem.currentStyle ? elem.currentStyle : elem.style ),\n\t\t\t\tmatrix, data;\n\n\t\t\tif ( elemStyle && rMatrix.test( elemStyle.filter ) ) {\n\t\t\t\tmatrix = RegExp.$1.split(\",\");\n\t\t\t\tmatrix = [\n\t\t\t\t\tmatrix[0].split(\"=\")[1],\n\t\t\t\t\tmatrix[2].split(\"=\")[1],\n\t\t\t\t\tmatrix[1].split(\"=\")[1],\n\t\t\t\t\tmatrix[3].split(\"=\")[1]\n\t\t\t\t];\n\t\t\t} else {\n\t\t\t\tmatrix = [1,0,0,1];\n\t\t\t}\n\n\t\t\tif ( ! $.cssHooks[_transformOrigin] ) {\n\t\t\t\tmatrix[4] = elemStyle ? parseInt(elemStyle.left, 10) || 0 : 0;\n\t\t\t\tmatrix[5] = elemStyle ? parseInt(elemStyle.top, 10) || 0 : 0;\n\n\t\t\t} else {\n\t\t\t\tdata = $._data( elem, \"transformTranslate\", undefined );\n\t\t\t\tmatrix[4] = data ? data[0] : 0;\n\t\t\t\tmatrix[5] = data ? data[1] : 0;\n\t\t\t}\n\n\t\t\treturn asArray ? matrix : _matrix+\"(\" + matrix + \")\";\n\t\t},\n\t\tset: function( elem, value, animate ) {\n\t\t\tvar elemStyle = elem.style,\n\t\t\t\tcurrentStyle,\n\t\t\t\tMatrix,\n\t\t\t\tfilter,\n\t\t\t\tcenterOrigin;\n\n\t\t\tif ( !animate ) {\n\t\t\t\telemStyle.zoom = 1;\n\t\t\t}\n\n\t\t\tvalue = matrix(value);\n\n\t\t\t// rotate, scale and skew\n\t\t\tMatrix = [\n\t\t\t\t\"Matrix(\"+\n\t\t\t\t\t\"M11=\"+value[0],\n\t\t\t\t\t\"M12=\"+value[2],\n\t\t\t\t\t\"M21=\"+value[1],\n\t\t\t\t\t\"M22=\"+value[3],\n\t\t\t\t\t\"SizingMethod='auto expand'\"\n\t\t\t].join();\n\t\t\tfilter = ( currentStyle = elem.currentStyle ) && currentStyle.filter || elemStyle.filter || \"\";\n\n\t\t\telemStyle.filter = rMatrix.test(filter) ?\n\t\t\t\tfilter.replace(rMatrix, Matrix) :\n\t\t\t\tfilter + \" progid:DXImageTransform.Microsoft.\" + Matrix + \")\";\n\n\t\t\tif ( ! $.cssHooks[_transformOrigin] ) {\n\n\t\t\t\t// center the transform origin, from pbakaus's Transformie http://github.com/pbakaus/transformie\n\t\t\t\tif ( (centerOrigin = $.transform.centerOrigin) ) {\n\t\t\t\t\telemStyle[centerOrigin == \"margin\" ? \"marginLeft\" : \"left\"] = -(elem.offsetWidth/2) + (elem.clientWidth/2) + \"px\";\n\t\t\t\t\telemStyle[centerOrigin == \"margin\" ? \"marginTop\" : \"top\"] = -(elem.offsetHeight/2) + (elem.clientHeight/2) + \"px\";\n\t\t\t\t}\n\n\t\t\t\t// translate\n\t\t\t\t// We assume that the elements are absolute positionned inside a relative positionned wrapper\n\t\t\t\telemStyle.left = value[4] + \"px\";\n\t\t\t\telemStyle.top = value[5] + \"px\";\n\n\t\t\t} else {\n\t\t\t\t$.cssHooks[_transformOrigin].set( elem, value );\n\t\t\t}\n\t\t}\n\t};\n}\n// populate jQuery.cssHooks with the appropriate hook if necessary\nif ( propertyHook ) {\n\t$.cssHooks[_transform] = propertyHook;\n}\n// we need a unique setter for the animation logic\npropertyGet = propertyHook && propertyHook.get || $.css;\n\n/*\n * fn.animate() hooks\n */\n$.fx.step.transform = function( fx ) {\n\tvar elem = fx.elem,\n\t\tstart = fx.start,\n\t\tend = fx.end,\n\t\tpos = fx.pos,\n\t\ttransform = \"\",\n\t\tprecision = 1E5,\n\t\ti, startVal, endVal, unit;\n\n\t// fx.end and fx.start need to be converted to interpolation lists\n\tif ( !start || typeof start === \"string\" ) {\n\n\t\t// the following block can be commented out with jQuery 1.5.1+, see #7912\n\t\tif ( !start ) {\n\t\t\tstart = propertyGet( elem, supportProperty );\n\t\t}\n\n\t\t// force layout only once per animation\n\t\tif ( supportMatrixFilter ) {\n\t\t\telem.style.zoom = 1;\n\t\t}\n\n\t\t// replace \"+=\" in relative animations (-= is meaningless with transforms)\n\t\tend = end.split(\"+=\").join(start);\n\n\t\t// parse both transform to generate interpolation list of same length\n\t\t$.extend( fx, interpolationList( start, end ) );\n\t\tstart = fx.start;\n\t\tend = fx.end;\n\t}\n\n\ti = start.length;\n\n\t// interpolate functions of the list one by one\n\twhile ( i-- ) {\n\t\tstartVal = start[i];\n\t\tendVal = end[i];\n\t\tunit = +false;\n\n\t\tswitch ( startVal[0] ) {\n\n\t\t\tcase _translate:\n\t\t\t\tunit = \"px\";\n\t\t\tcase _scale:\n\t\t\t\tunit || ( unit = \"\");\n\n\t\t\t\ttransform = startVal[0] + \"(\" +\n\t\t\t\t\tMath.round( (startVal[1][0] + (endVal[1][0] - startVal[1][0]) * pos) * precision ) / precision + unit +\",\"+\n\t\t\t\t\tMath.round( (startVal[1][1] + (endVal[1][1] - startVal[1][1]) * pos) * precision ) / precision + unit + \")\"+\n\t\t\t\t\ttransform;\n\t\t\t\tbreak;\n\n\t\t\tcase _skew + \"X\":\n\t\t\tcase _skew + \"Y\":\n\t\t\tcase _rotate:\n\t\t\t\ttransform = startVal[0] + \"(\" +\n\t\t\t\t\tMath.round( (startVal[1] + (endVal[1] - startVal[1]) * pos) * precision ) / precision +\"rad)\"+\n\t\t\t\t\ttransform;\n\t\t\t\tbreak;\n\t\t}\n\t}\n\n\tfx.origin && ( transform = fx.origin + transform );\n\n\tpropertyHook && propertyHook.set ?\n\t\tpropertyHook.set( elem, transform, +true ):\n\t\telem.style[supportProperty] = transform;\n};\n\n/*\n * Utility functions\n */\n\n// turns a transform string into its \"matrix(A,B,C,D,X,Y)\" form (as an array, though)\nfunction matrix( transform ) {\n\ttransform = transform.split(\")\");\n\tvar\n\t\t\ttrim = $.trim\n\t\t, i = -1\n\t\t// last element of the array is an empty string, get rid of it\n\t\t, l = transform.length -1\n\t\t, split, prop, val\n\t\t, prev = supportFloat32Array ? new Float32Array(6) : []\n\t\t, curr = supportFloat32Array ? new Float32Array(6) : []\n\t\t, rslt = supportFloat32Array ? new Float32Array(6) : [1,0,0,1,0,0]\n\t\t;\n\n\tprev[0] = prev[3] = rslt[0] = rslt[3] = 1;\n\tprev[1] = prev[2] = prev[4] = prev[5] = 0;\n\n\t// Loop through the transform properties, parse and multiply them\n\twhile ( ++i < l ) {\n\t\tsplit = transform[i].split(\"(\");\n\t\tprop = trim(split[0]);\n\t\tval = split[1];\n\t\tcurr[0] = curr[3] = 1;\n\t\tcurr[1] = curr[2] = curr[4] = curr[5] = 0;\n\n\t\tswitch (prop) {\n\t\t\tcase _translate+\"X\":\n\t\t\t\tcurr[4] = parseInt(val, 10);\n\t\t\t\tbreak;\n\n\t\t\tcase _translate+\"Y\":\n\t\t\t\tcurr[5] = parseInt(val, 10);\n\t\t\t\tbreak;\n\n\t\t\tcase _translate:\n\t\t\t\tval = val.split(\",\");\n\t\t\t\tcurr[4] = parseInt(val[0], 10);\n\t\t\t\tcurr[5] = parseInt(val[1] || 0, 10);\n\t\t\t\tbreak;\n\n\t\t\tcase _rotate:\n\t\t\t\tval = toRadian(val);\n\t\t\t\tcurr[0] = Math.cos(val);\n\t\t\t\tcurr[1] = Math.sin(val);\n\t\t\t\tcurr[2] = -Math.sin(val);\n\t\t\t\tcurr[3] = Math.cos(val);\n\t\t\t\tbreak;\n\n\t\t\tcase _scale+\"X\":\n\t\t\t\tcurr[0] = +val;\n\t\t\t\tbreak;\n\n\t\t\tcase _scale+\"Y\":\n\t\t\t\tcurr[3] = val;\n\t\t\t\tbreak;\n\n\t\t\tcase _scale:\n\t\t\t\tval = val.split(\",\");\n\t\t\t\tcurr[0] = val[0];\n\t\t\t\tcurr[3] = val.length>1 ? val[1] : val[0];\n\t\t\t\tbreak;\n\n\t\t\tcase _skew+\"X\":\n\t\t\t\tcurr[2] = Math.tan(toRadian(val));\n\t\t\t\tbreak;\n\n\t\t\tcase _skew+\"Y\":\n\t\t\t\tcurr[1] = Math.tan(toRadian(val));\n\t\t\t\tbreak;\n\n\t\t\tcase _matrix:\n\t\t\t\tval = val.split(\",\");\n\t\t\t\tcurr[0] = val[0];\n\t\t\t\tcurr[1] = val[1];\n\t\t\t\tcurr[2] = val[2];\n\t\t\t\tcurr[3] = val[3];\n\t\t\t\tcurr[4] = parseInt(val[4], 10);\n\t\t\t\tcurr[5] = parseInt(val[5], 10);\n\t\t\t\tbreak;\n\t\t}\n\n\t\t// Matrix product (array in column-major order)\n\t\trslt[0] = prev[0] * curr[0] + prev[2] * curr[1];\n\t\trslt[1] = prev[1] * curr[0] + prev[3] * curr[1];\n\t\trslt[2] = prev[0] * curr[2] + prev[2] * curr[3];\n\t\trslt[3] = prev[1] * curr[2] + prev[3] * curr[3];\n\t\trslt[4] = prev[0] * curr[4] + prev[2] * curr[5] + prev[4];\n\t\trslt[5] = prev[1] * curr[4] + prev[3] * curr[5] + prev[5];\n\n\t\tprev = [rslt[0],rslt[1],rslt[2],rslt[3],rslt[4],rslt[5]];\n\t}\n\treturn rslt;\n}\n\n// turns a matrix into its rotate, scale and skew components\n// algorithm from http://hg.mozilla.org/mozilla-central/file/7cb3e9795d04/layout/style/nsStyleAnimation.cpp\nfunction unmatrix(matrix) {\n\tvar\n\t\t\tscaleX\n\t\t, scaleY\n\t\t, skew\n\t\t, A = matrix[0]\n\t\t, B = matrix[1]\n\t\t, C = matrix[2]\n\t\t, D = matrix[3]\n\t\t;\n\n\t// Make sure matrix is not singular\n\tif ( A * D - B * C ) {\n\t\t// step (3)\n\t\tscaleX = Math.sqrt( A * A + B * B );\n\t\tA /= scaleX;\n\t\tB /= scaleX;\n\t\t// step (4)\n\t\tskew = A * C + B * D;\n\t\tC -= A * skew;\n\t\tD -= B * skew;\n\t\t// step (5)\n\t\tscaleY = Math.sqrt( C * C + D * D );\n\t\tC /= scaleY;\n\t\tD /= scaleY;\n\t\tskew /= scaleY;\n\t\t// step (6)\n\t\tif ( A * D < B * C ) {\n\t\t\tA = -A;\n\t\t\tB = -B;\n\t\t\tskew = -skew;\n\t\t\tscaleX = -scaleX;\n\t\t}\n\n\t// matrix is singular and cannot be interpolated\n\t} else {\n\t\t// In this case the elem shouldn't be rendered, hence scale == 0\n\t\tscaleX = scaleY = skew = 0;\n\t}\n\n\t// The recomposition order is very important\n\t// see http://hg.mozilla.org/mozilla-central/file/7cb3e9795d04/layout/style/nsStyleAnimation.cpp#l971\n\treturn [\n\t\t[_translate, [+matrix[4], +matrix[5]]],\n\t\t[_rotate, Math.atan2(B, A)],\n\t\t[_skew + \"X\", Math.atan(skew)],\n\t\t[_scale, [scaleX, scaleY]]\n\t];\n}\n\n// build the list of transform functions to interpolate\n// use the algorithm described at http://dev.w3.org/csswg/css3-2d-transforms/#animation\nfunction interpolationList( start, end ) {\n\tvar list = {\n\t\t\tstart: [],\n\t\t\tend: []\n\t\t},\n\t\ti = -1, l,\n\t\tcurrStart, currEnd, currType;\n\n\t// get rid of affine transform matrix\n\t( start == \"none\" || isAffine( start ) ) && ( start = \"\" );\n\t( end == \"none\" || isAffine( end ) ) && ( end = \"\" );\n\n\t// if end starts with the current computed style, this is a relative animation\n\t// store computed style as the origin, remove it from start and end\n\tif ( start && end && !end.indexOf(\"matrix\") && toArray( start ).join() == toArray( end.split(\")\")[0] ).join() ) {\n\t\tlist.origin = start;\n\t\tstart = \"\";\n\t\tend = end.slice( end.indexOf(\")\") +1 );\n\t}\n\n\tif ( !start && !end ) { return; }\n\n\t// start or end are affine, or list of transform functions are identical\n\t// => functions will be interpolated individually\n\tif ( !start || !end || functionList(start) == functionList(end) ) {\n\n\t\tstart && ( start = start.split(\")\") ) && ( l = start.length );\n\t\tend && ( end = end.split(\")\") ) && ( l = end.length );\n\n\t\twhile ( ++i < l-1 ) {\n\t\t\tstart[i] && ( currStart = start[i].split(\"(\") );\n\t\t\tend[i] && ( currEnd = end[i].split(\"(\") );\n\t\t\tcurrType = $.trim( ( currStart || currEnd )[0] );\n\n\t\t\tappend( list.start, parseFunction( currType, currStart ? currStart[1] : 0 ) );\n\t\t\tappend( list.end, parseFunction( currType, currEnd ? currEnd[1] : 0 ) );\n\t\t}\n\n\t// otherwise, functions will be composed to a single matrix\n\t} else {\n\t\tlist.start = unmatrix(matrix(start));\n\t\tlist.end = unmatrix(matrix(end))\n\t}\n\n\treturn list;\n}\n\nfunction parseFunction( type, value ) {\n\tvar\n\t\t// default value is 1 for scale, 0 otherwise\n\t\tdefaultValue = +(!type.indexOf(_scale)),\n\t\tscaleX,\n\t\t// remove X/Y from scaleX/Y & translateX/Y, not from skew\n\t\tcat = type.replace( /e[XY]/, \"e\" );\n\n\tswitch ( type ) {\n\t\tcase _translate+\"Y\":\n\t\tcase _scale+\"Y\":\n\n\t\t\tvalue = [\n\t\t\t\tdefaultValue,\n\t\t\t\tvalue ?\n\t\t\t\t\tparseFloat( value ):\n\t\t\t\t\tdefaultValue\n\t\t\t];\n\t\t\tbreak;\n\n\t\tcase _translate+\"X\":\n\t\tcase _translate:\n\t\tcase _scale+\"X\":\n\t\t\tscaleX = 1;\n\t\tcase _scale:\n\n\t\t\tvalue = value ?\n\t\t\t\t( value = value.split(\",\") ) &&\t[\n\t\t\t\t\tparseFloat( value[0] ),\n\t\t\t\t\tparseFloat( value.length>1 ? value[1] : type == _scale ? scaleX || value[0] : defaultValue+\"\" )\n\t\t\t\t]:\n\t\t\t\t[defaultValue, defaultValue];\n\t\t\tbreak;\n\n\t\tcase _skew+\"X\":\n\t\tcase _skew+\"Y\":\n\t\tcase _rotate:\n\t\t\tvalue = value ? toRadian( value ) : 0;\n\t\t\tbreak;\n\n\t\tcase _matrix:\n\t\t\treturn unmatrix( value ? toArray(value) : [1,0,0,1,0,0] );\n\t\t\tbreak;\n\t}\n\n\treturn [[ cat, value ]];\n}\n\nfunction isAffine( matrix ) {\n\treturn rAffine.test(matrix);\n}\n\nfunction functionList( transform ) {\n\treturn transform.replace(/(?:\\([^)]*\\))|\\s/g, \"\");\n}\n\nfunction append( arr1, arr2, value ) {\n\twhile ( value = arr2.shift() ) {\n\t\tarr1.push( value );\n\t}\n}\n\n// converts an angle string in any unit to a radian Float\nfunction toRadian(value) {\n\treturn ~value.indexOf(\"deg\") ?\n\t\tparseInt(value,10) * (Math.PI * 2 / 360):\n\t\t~value.indexOf(\"grad\") ?\n\t\t\tparseInt(value,10) * (Math.PI/200):\n\t\t\tparseFloat(value);\n}\n\n// Converts \"matrix(A,B,C,D,X,Y)\" to [A,B,C,D,X,Y]\nfunction toArray(matrix) {\n\t// remove the unit of X and Y for Firefox\n\tmatrix = /([^,]*),([^,]*),([^,]*),([^,]*),([^,p]*)(?:px)?,([^)p]*)(?:px)?/.exec(matrix);\n\treturn [matrix[1], matrix[2], matrix[3], matrix[4], matrix[5], matrix[6]];\n}\n\n$.transform = {\n\tcenterOrigin: \"margin\"\n};\n\n})( jQuery, window, document, Math );\n" }, { "path": "jquery.transform3d.js", "content": "/*\n * transform: A jQuery cssHooks adding 2D/3D transform capabilities to $.fn.css() and $.fn.animate()\n *\n * Requirements:\n * - jQuery 1.5.1+\n * - jquery.transition.js for animations\n * - browser implementing W3C's CSS 2DTransforms for 2D tranform\n * - browser implementing W3C's CSS 3DTransforms for 3D tranform\n *\n * latest version and complete README available on Github:\n * https://github.com/louisremi/jquery.transform.js\n *\n * Copyright 2011 @louis_remi\n * Licensed under the MIT license.\n *\n * This saved you an hour of work?\n * Send me music http://www.amazon.co.uk/wishlist/HNTU0468LQON\n *\n */\n(function( $, window, document ) {\n\"use strict\";\n\nvar div = document.createElement(\"div\"),\n\tdivStyle = div.style,\n\tprefixes = [\n\t\t\"O\",\n\t\t\"ms\",\n\t\t\"Webkit\",\n\t\t\"Moz\"\n\t],\n\tprefix,\n\ti = prefixes.length,\n\tproperties = [\n\t\t\"transform\",\n\t\t\"transformOrigin\",\n\t\t\"transformStyle\",\n\t\t\"perspective\",\n\t\t\"perspectiveOrigin\",\n\t\t\"backfaceVisibility\"\n\t],\n\tproperty,\n\tj = prefixes.length;\n\n// Find the right prefix\nwhile ( i-- ) {\n\tif ( prefixes[i] + leadingUppercase( properties[0] ) in divStyle ) {\n\t\tprefix = prefixes[i];\n\t\tcontinue;\n\t}\n}\n\n// This browser is not compatible with transforms\nif ( !prefix ) { return; }\n\n// Build cssHooks for each property\nwhile ( j-- ) {\n\tproperty = prefix + leadingUppercase( properties[j] );\n\n\tif ( property in divStyle ) {\n\n\t\t// px isn't the default unit of this property\n\t\t$.cssNumber[ properties[j] ] = true;\n\n\t\t// populate cssProps\n\t\t$.cssProps[ properties[j] ] = property;\n\n\t\t// MozTranform requires a complete hook because \"px\" is required in translate\n\t\tproperty === \"MozTransform\" && ($.cssHooks[ properties[j] ] = {\n\t\t\tget: function( elem, computed ) {\n\t\t\t\treturn (computed ?\n\t\t\t\t\t// remove \"px\" from the computed matrix\n\t\t\t\t\t$.css( elem, property ).split(\"px\").join(\"\"):\n\t\t\t\t\telem.style[property]\n\t\t\t\t);\n\t\t\t},\n\t\t\tset: function( elem, value ) {\n\t\t\t\t// add \"px\" to matrices\n\t\t\t\t/matrix\\([^)p]*\\)/.test(value) && (\n\t\t\t\t\tvalue = value.replace(/matrix((?:[^,]*,){4})([^,]*),([^)]*)/, \"matrix$1$2px,$3px\")\n\t\t\t\t);\n\t\t\t\telem.style[property] = value;\n\t\t\t}\n\t\t});\n\n\t}\n}\n\nfunction leadingUppercase( word ) {\n\treturn word.slice(0,1).toUpperCase() + word.slice(1);\n}\n\n})( jQuery, window, document );" }, { "path": "package.json", "content": "{\n \"name\": \"transform\",\n \"version\": \"1.0\",\n \"title\": \"Add a transform property to $.fn.css() and $.fn.animate()\",\n \"author\": {\n \"name\": \"Louis-Rémi\",\n \"url\": \"http://twitter.com/louis_remi\"\n },\n \"licenses\": [\n {\n \"type\": \"MIT\",\n \"url\": \"http://louisremi.mit-license.org\"\n }\n ],\n \"dependencies\": {\n \"jquery\": \">=1.4.3\",\n \"transition\": \"*\"\n },\n \"description\": \"This plugins makes it possible to use and animate 2D Transforms in all browsers, as well as 3D Transforms in compatible browsers.\",\n \"keywords\": [\n \"DOM\",\n \"animate\",\n \"transform\",\n \"2D\",\n \"3D\",\n \"CSS3\",\n \"cssHooks\"\n ],\n \"homepage\": \"https://github.com/louisremi/jquery.transform.js\",\n \"files\": [\n \"jquery.transform2d.js\",\n \"jquery.transform3d.js\"\n ]\n}\n" }, { "path": "test/example3d.html", "content": "\n\n\n\n\n\n

Something you cannot do with CSS only

\n
\n\t\n\t\n\t\n\t\n
\n\n\n\n\n\n\n\n" }, { "path": "test/transform2d.html", "content": "\n\n\n\n\n\n\n\n\n\n\t\n\n\t

Visual tests of jquery.transform2d.js

\n\n\t

$elem.css(\"transform\", \"rotate(45deg)\");

\n\t
\n\t
\n\t\n\n\t

$elem.css(\"transform\", \"skewX(30deg) skewY(10deg)\");

\n\t
\n\t
\n\t\n\n\t

$elem.css(\"transform\", \"scale(2, .5)\");

\n\t
\n\t
\n\t\n\n\t

$elem.css(\"transform\", \"translate(100px, 10px)\");

\n\t
\n\t
\n\t\t
\n\t
\n\t\n\n\t

$elem.css(\"transform\", \"matrix(.5, .433, -.5, 1.033, 50, -10)\");

\n\t
\n\t
\n\t\t
\n\t
\n\t\n\n\t

$elem.css(\"transform\", \"rotate(45deg) translate(38px)\");

\n\t
\n\t
\n\t\t
\n\t
\n\t\n\n\t

$elem.css(\"transform\", \"rotate(45deg) translateY(-68px) skewX(-30deg) scale(1.2) matrix(.5, .433, -.5, 1.033, 50, -10)\");

\n\t
\n\t
\n\t\t
\n\t
\n\t\n\n\t

$elem.animate({\"transform\": \"rotate(45deg)\"});

\n\t
\n\t
\n\t\n\n\t

$elem.animate({\"transform\": \"rotate(45deg)\"}, 0);

\n\t
\n\t
\n\t\n\n\t

$elem.animate({\"transform\": \"rotate(45deg) translateY(-68px) skewX(-30deg) scale(1.2) matrix(.5, .433, -.5, 1.033, 50, -10)}\");

\n\t
\n\t
\n\t\t
\n\t
\n\t\n\n\t

$elem.css(\"transform\", \"rotate(45deg) translateY(-68px) skewX(-30deg) scale(1.2)\").animate({\"transform\": \"+=rotate(45deg) translateY(-68px) skewX(-30deg) scale(1.2)\");

\n\t
\n\t
\n\t\t
\n\t
\n\t\n\n" }, { "path": "test/transform3d.html", "content": "\n\n\n\n\n\n\n\n\n\n\n\t\n\n\t

Visual tests of jquery.transform3d.js

\n\n\t

$elem.css(\"transform\", \"rotate(45deg)\");

\n\t
\n\t
\n\t\n\n\t

$elem.css(\"transform\", \"skewX(30deg) skewY(10deg)\");

\n\t
\n\t
\n\t\n\n\t

$elem.css(\"transform\", \"scale(2, .5)\");

\n\t
\n\t
\n\t\n\n\t

$elem.css(\"transform\", \"translate(100px, 10px)\");

\n\t
\n\t
\n\t\t
\n\t
\n\t\n\n\t

$elem.css(\"transform\", \"matrix(.5, .433, -.5, 1.033, 50, -10)\");

\n\t
\n\t
\n\t\t
\n\t
\n\t\n\n\t

$elem.css(\"transform\", \"rotate(45deg) translate(38px)\");

\n\t
\n\t
\n\t\t
\n\t
\n\t\n\n\t

$elem.css(\"transform\", \"rotate(45deg) translateY(-68px) skewX(-30deg) scale(1.2) matrix(.5, .433, -.5, 1.033, 50, -10)\");

\n\t
\n\t
\n\t\t
\n\t
\n\t\n\n\t

$elem.css(\"transform\", \"rotateZ(45deg)\");

\n\t
\n\t
\n\t\n\n\t

$elem.css(\"transform\", \"matrix3d(.5,.433,0,0,-.5,1,0,0,0,0,1,0,50,-10,0,1)\");

\n\t
\n\t
\n\t\n\n\t

$elem.animate({\"transform\": \"rotate(45deg)\"});

\n\t
\n\t
\n\t\n\n\t

$elem.animate({\"transform\": \"scale(.5,1)\"});

\n\t
\n\t
\n\t\n\n\t

$elem.animate({\"transform\": \"rotate(45deg) translateY(-68px) skewX(-30deg) scale(1.2) matrix(.5, .433, -.5, 1.033, 50, -10)}\");

\n\t
\n\t
\n\t\t
\n\t
\n\t\n\n\n" }, { "path": "test/transformOrigin.html", "content": "\n\n\n\n\n\n\n\n\n\n\n\t\n\n\t

Visual tests of jquery.transformOrigin.js

\n\n\t

$elem.css({transformOrigin: \"100% 100%\", transform: \"rotate(110deg)\"});

\n\t
\n\t
\n\t\n\n" } ]