Repository: louisremi/jquery.transform.js
Branch: master
Commit: e195b9a71185
Files: 9
Total size: 38.7 KB

Directory structure:
gitextract_1q9xzhft/

├── README.md
├── bower.json
├── jquery.transform2d.js
├── jquery.transform3d.js
├── package.json
└── test/
    ├── example3d.html
    ├── transform2d.html
    ├── transform3d.html
    └── transformOrigin.html

================================================
FILE CONTENTS
================================================

================================================
FILE: README.md
================================================
jquery.transform2d.js adds 2d transform capabilities to jQuery `css()` and `animate()` functions.

[Demo](http://louisremi.github.com/jquery.transform.js/index.html)

Usage:
======

Set transform with a string
---------------------------

    $(elem).css('transform', 'translate(50px, 30px) rotate(25deg) scale(2,.5) skewX(-35deg)');
    $(elem).animate({transform: 'translateY(-100px) rotate(1rad) scaleX(2) skewY(42deg)'});

You can use the following list of transform functions:  
- `translateX(<number>px)`  
- `translateY(<number>px)`  
- combined: `translate(<number>px, <number>px)` *the second number is optional and defaults to 0*  
- `scaleX(<number>)`  
- `scaleY(<number>)`  
- combined: `scale(<number>, <number>)` *the second number is optional and defaults to the value of the first one*  
- `rotate(<angle>)` *units for angles are *rad* (default), *deg* or *grad*.*  
- `skewX(<angle>)`  
- `skewY(<angle>)`  
- `matrix(<number>, <number>, <number>, <number>, <number>, <number>)`*

*`matrix` gives you more control about the resulting transformation, using a [matrix construction set](http://www.useragentman.com/matrix/).  
When 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.

Get transform
-------------

returns a computed transform matrix.

    $(elem).css('transform') == 'matrix(0,1,-1,0,100,50)';

Relative animations
-------------------

Relative animations are possible by prepending "+=" to the transform string.

    $(elem).css('transform', 'rotate(45deg)');
    // using the following syntax, elem will always rotate 90deg anticlockwise
    $(elem).animate({transform: '+=rotate(-90deg)'});

Limitations:
============

- requires jQuery 1.4.3+,
- 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**,
- transformOrigin is not accessible.

Why such restrictions with 'translate'?
---------------------------------------

Since translate is unavailable in IE<9, we have to emulate it using *top* and *left* properties of the element style.  
This can, of course, only work if the elements are absolutely positionned in a relatively positionned wrapper.  

Other plugins position the elements and wrap them transparently.  
I think that transparently messing with the DOM often introduces unpredictible behavior.  
Unpredictible behavior leads developpers to fear plugins.  
*Fear leads to anger. Anger leads to hate. Hate leads to suffering.*  
I prefer leaving this up to you.

License
=======

Dual licensed under GPL and MIT licenses.

Copyright (c) 2010 [Louis-Rémi Babé](http://twitter.com/louis_remi).

================================================
FILE: bower.json
================================================
{
  "name":"jquery.transform.js",
  "version":"1.0.0",
  "main": [
    "jquery.transform2d.js",
    "jquery.transform3d.js"
  ],
  "description":"",
  "license":"Dual licensed under GPL and MIT licenses.",
  "ignore":[
  ],
  "dependencies":{
    "jquery":"~1.7.2"
  },
  "devDependencies":{}
}


================================================
FILE: jquery.transform2d.js
================================================
/*
 * transform: A jQuery cssHooks adding cross-browser 2d transform capabilities to $.fn.css() and $.fn.animate()
 *
 * limitations:
 * - requires jQuery 1.4.3+
 * - 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**.
 * - transformOrigin is not accessible
 *
 * latest version and complete README available on Github:
 * https://github.com/louisremi/jquery.transform.js
 *
 * Copyright 2011 @louis_remi
 * Licensed under the MIT license.
 *
 * This saved you an hour of work?
 * Send me music http://www.amazon.co.uk/wishlist/HNTU0468LQON
 *
 */
(function( $, window, document, Math, undefined ) {

/*
 * Feature tests and global variables
 */
var div = document.createElement("div"),
	divStyle = div.style,
	suffix = "Transform",
	testProperties = [
		"O" + suffix,
		"ms" + suffix,
		"Webkit" + suffix,
		"Moz" + suffix
	],
	i = testProperties.length,
	supportProperty,
	supportMatrixFilter,
	supportFloat32Array = "Float32Array" in window,
	propertyHook,
	propertyGet,
	rMatrix = /Matrix([^)]*)/,
	rAffine = /^\s*matrix\(\s*1\s*,\s*0\s*,\s*0\s*,\s*1\s*(?:,\s*0(?:px)?\s*){2}\)\s*$/,
	_transform = "transform",
	_transformOrigin = "transformOrigin",
	_translate = "translate",
	_rotate = "rotate",
	_scale = "scale",
	_skew = "skew",
	_matrix = "matrix";

// test different vendor prefixes of these properties
while ( i-- ) {
	if ( testProperties[i] in divStyle ) {
		$.support[_transform] = supportProperty = testProperties[i];
		$.support[_transformOrigin] = supportProperty + "Origin";
		continue;
	}
}
// IE678 alternative
if ( !supportProperty ) {
	$.support.matrixFilter = supportMatrixFilter = divStyle.filter === "";
}

// px isn't the default unit of these properties
$.cssNumber[_transform] = $.cssNumber[_transformOrigin] = true;

/*
 * fn.css() hooks
 */
if ( supportProperty && supportProperty != _transform ) {
	// Modern browsers can use jQuery.cssProps as a basic hook
	$.cssProps[_transform] = supportProperty;
	$.cssProps[_transformOrigin] = supportProperty + "Origin";

	// Firefox needs a complete hook because it stuffs matrix with "px"
	if ( supportProperty == "Moz" + suffix ) {
		propertyHook = {
			get: function( elem, computed ) {
				return (computed ?
					// remove "px" from the computed matrix
					$.css( elem, supportProperty ).split("px").join(""):
					elem.style[supportProperty]
				);
			},
			set: function( elem, value ) {
				// add "px" to matrices
				elem.style[supportProperty] = /matrix\([^)p]*\)/.test(value) ?
					value.replace(/matrix((?:[^,]*,){4})([^,]*),([^)]*)/, _matrix+"$1$2px,$3px"):
					value;
			}
		};
	/* Fix two jQuery bugs still present in 1.5.1
	 * - rupper is incompatible with IE9, see http://jqbug.com/8346
	 * - jQuery.css is not really jQuery.cssProps aware, see http://jqbug.com/8402
	 */
	} else if ( /^1\.[0-5](?:\.|$)/.test($.fn.jquery) ) {
		propertyHook = {
			get: function( elem, computed ) {
				return (computed ?
					$.css( elem, supportProperty.replace(/^ms/, "Ms") ):
					elem.style[supportProperty]
				);
			}
		};
	}
	/* TODO: leverage hardware acceleration of 3d transform in Webkit only
	else if ( supportProperty == "Webkit" + suffix && support3dTransform ) {
		propertyHook = {
			set: function( elem, value ) {
				elem.style[supportProperty] = 
					value.replace();
			}
		}
	}*/

} else if ( supportMatrixFilter ) {
	propertyHook = {
		get: function( elem, computed, asArray ) {
			var elemStyle = ( computed && elem.currentStyle ? elem.currentStyle : elem.style ),
				matrix, data;

			if ( elemStyle && rMatrix.test( elemStyle.filter ) ) {
				matrix = RegExp.$1.split(",");
				matrix = [
					matrix[0].split("=")[1],
					matrix[2].split("=")[1],
					matrix[1].split("=")[1],
					matrix[3].split("=")[1]
				];
			} else {
				matrix = [1,0,0,1];
			}

			if ( ! $.cssHooks[_transformOrigin] ) {
				matrix[4] = elemStyle ? parseInt(elemStyle.left, 10) || 0 : 0;
				matrix[5] = elemStyle ? parseInt(elemStyle.top, 10) || 0 : 0;

			} else {
				data = $._data( elem, "transformTranslate", undefined );
				matrix[4] = data ? data[0] : 0;
				matrix[5] = data ? data[1] : 0;
			}

			return asArray ? matrix : _matrix+"(" + matrix + ")";
		},
		set: function( elem, value, animate ) {
			var elemStyle = elem.style,
				currentStyle,
				Matrix,
				filter,
				centerOrigin;

			if ( !animate ) {
				elemStyle.zoom = 1;
			}

			value = matrix(value);

			// rotate, scale and skew
			Matrix = [
				"Matrix("+
					"M11="+value[0],
					"M12="+value[2],
					"M21="+value[1],
					"M22="+value[3],
					"SizingMethod='auto expand'"
			].join();
			filter = ( currentStyle = elem.currentStyle ) && currentStyle.filter || elemStyle.filter || "";

			elemStyle.filter = rMatrix.test(filter) ?
				filter.replace(rMatrix, Matrix) :
				filter + " progid:DXImageTransform.Microsoft." + Matrix + ")";

			if ( ! $.cssHooks[_transformOrigin] ) {

				// center the transform origin, from pbakaus's Transformie http://github.com/pbakaus/transformie
				if ( (centerOrigin = $.transform.centerOrigin) ) {
					elemStyle[centerOrigin == "margin" ? "marginLeft" : "left"] = -(elem.offsetWidth/2) + (elem.clientWidth/2) + "px";
					elemStyle[centerOrigin == "margin" ? "marginTop" : "top"] = -(elem.offsetHeight/2) + (elem.clientHeight/2) + "px";
				}

				// translate
				// We assume that the elements are absolute positionned inside a relative positionned wrapper
				elemStyle.left = value[4] + "px";
				elemStyle.top = value[5] + "px";

			} else {
				$.cssHooks[_transformOrigin].set( elem, value );
			}
		}
	};
}
// populate jQuery.cssHooks with the appropriate hook if necessary
if ( propertyHook ) {
	$.cssHooks[_transform] = propertyHook;
}
// we need a unique setter for the animation logic
propertyGet = propertyHook && propertyHook.get || $.css;

/*
 * fn.animate() hooks
 */
$.fx.step.transform = function( fx ) {
	var elem = fx.elem,
		start = fx.start,
		end = fx.end,
		pos = fx.pos,
		transform = "",
		precision = 1E5,
		i, startVal, endVal, unit;

	// fx.end and fx.start need to be converted to interpolation lists
	if ( !start || typeof start === "string" ) {

		// the following block can be commented out with jQuery 1.5.1+, see #7912
		if ( !start ) {
			start = propertyGet( elem, supportProperty );
		}

		// force layout only once per animation
		if ( supportMatrixFilter ) {
			elem.style.zoom = 1;
		}

		// replace "+=" in relative animations (-= is meaningless with transforms)
		end = end.split("+=").join(start);

		// parse both transform to generate interpolation list of same length
		$.extend( fx, interpolationList( start, end ) );
		start = fx.start;
		end = fx.end;
	}

	i = start.length;

	// interpolate functions of the list one by one
	while ( i-- ) {
		startVal = start[i];
		endVal = end[i];
		unit = +false;

		switch ( startVal[0] ) {

			case _translate:
				unit = "px";
			case _scale:
				unit || ( unit = "");

				transform = startVal[0] + "(" +
					Math.round( (startVal[1][0] + (endVal[1][0] - startVal[1][0]) * pos) * precision ) / precision + unit +","+
					Math.round( (startVal[1][1] + (endVal[1][1] - startVal[1][1]) * pos) * precision ) / precision + unit + ")"+
					transform;
				break;

			case _skew + "X":
			case _skew + "Y":
			case _rotate:
				transform = startVal[0] + "(" +
					Math.round( (startVal[1] + (endVal[1] - startVal[1]) * pos) * precision ) / precision +"rad)"+
					transform;
				break;
		}
	}

	fx.origin && ( transform = fx.origin + transform );

	propertyHook && propertyHook.set ?
		propertyHook.set( elem, transform, +true ):
		elem.style[supportProperty] = transform;
};

/*
 * Utility functions
 */

// turns a transform string into its "matrix(A,B,C,D,X,Y)" form (as an array, though)
function matrix( transform ) {
	transform = transform.split(")");
	var
			trim = $.trim
		, i = -1
		// last element of the array is an empty string, get rid of it
		, l = transform.length -1
		, split, prop, val
		, prev = supportFloat32Array ? new Float32Array(6) : []
		, curr = supportFloat32Array ? new Float32Array(6) : []
		, rslt = supportFloat32Array ? new Float32Array(6) : [1,0,0,1,0,0]
		;

	prev[0] = prev[3] = rslt[0] = rslt[3] = 1;
	prev[1] = prev[2] = prev[4] = prev[5] = 0;

	// Loop through the transform properties, parse and multiply them
	while ( ++i < l ) {
		split = transform[i].split("(");
		prop = trim(split[0]);
		val = split[1];
		curr[0] = curr[3] = 1;
		curr[1] = curr[2] = curr[4] = curr[5] = 0;

		switch (prop) {
			case _translate+"X":
				curr[4] = parseInt(val, 10);
				break;

			case _translate+"Y":
				curr[5] = parseInt(val, 10);
				break;

			case _translate:
				val = val.split(",");
				curr[4] = parseInt(val[0], 10);
				curr[5] = parseInt(val[1] || 0, 10);
				break;

			case _rotate:
				val = toRadian(val);
				curr[0] = Math.cos(val);
				curr[1] = Math.sin(val);
				curr[2] = -Math.sin(val);
				curr[3] = Math.cos(val);
				break;

			case _scale+"X":
				curr[0] = +val;
				break;

			case _scale+"Y":
				curr[3] = val;
				break;

			case _scale:
				val = val.split(",");
				curr[0] = val[0];
				curr[3] = val.length>1 ? val[1] : val[0];
				break;

			case _skew+"X":
				curr[2] = Math.tan(toRadian(val));
				break;

			case _skew+"Y":
				curr[1] = Math.tan(toRadian(val));
				break;

			case _matrix:
				val = val.split(",");
				curr[0] = val[0];
				curr[1] = val[1];
				curr[2] = val[2];
				curr[3] = val[3];
				curr[4] = parseInt(val[4], 10);
				curr[5] = parseInt(val[5], 10);
				break;
		}

		// Matrix product (array in column-major order)
		rslt[0] = prev[0] * curr[0] + prev[2] * curr[1];
		rslt[1] = prev[1] * curr[0] + prev[3] * curr[1];
		rslt[2] = prev[0] * curr[2] + prev[2] * curr[3];
		rslt[3] = prev[1] * curr[2] + prev[3] * curr[3];
		rslt[4] = prev[0] * curr[4] + prev[2] * curr[5] + prev[4];
		rslt[5] = prev[1] * curr[4] + prev[3] * curr[5] + prev[5];

		prev = [rslt[0],rslt[1],rslt[2],rslt[3],rslt[4],rslt[5]];
	}
	return rslt;
}

// turns a matrix into its rotate, scale and skew components
// algorithm from http://hg.mozilla.org/mozilla-central/file/7cb3e9795d04/layout/style/nsStyleAnimation.cpp
function unmatrix(matrix) {
	var
			scaleX
		, scaleY
		, skew
		, A = matrix[0]
		, B = matrix[1]
		, C = matrix[2]
		, D = matrix[3]
		;

	// Make sure matrix is not singular
	if ( A * D - B * C ) {
		// step (3)
		scaleX = Math.sqrt( A * A + B * B );
		A /= scaleX;
		B /= scaleX;
		// step (4)
		skew = A * C + B * D;
		C -= A * skew;
		D -= B * skew;
		// step (5)
		scaleY = Math.sqrt( C * C + D * D );
		C /= scaleY;
		D /= scaleY;
		skew /= scaleY;
		// step (6)
		if ( A * D < B * C ) {
			A = -A;
			B = -B;
			skew = -skew;
			scaleX = -scaleX;
		}

	// matrix is singular and cannot be interpolated
	} else {
		// In this case the elem shouldn't be rendered, hence scale == 0
		scaleX = scaleY = skew = 0;
	}

	// The recomposition order is very important
	// see http://hg.mozilla.org/mozilla-central/file/7cb3e9795d04/layout/style/nsStyleAnimation.cpp#l971
	return [
		[_translate, [+matrix[4], +matrix[5]]],
		[_rotate, Math.atan2(B, A)],
		[_skew + "X", Math.atan(skew)],
		[_scale, [scaleX, scaleY]]
	];
}

// build the list of transform functions to interpolate
// use the algorithm described at http://dev.w3.org/csswg/css3-2d-transforms/#animation
function interpolationList( start, end ) {
	var list = {
			start: [],
			end: []
		},
		i = -1, l,
		currStart, currEnd, currType;

	// get rid of affine transform matrix
	( start == "none" || isAffine( start ) ) && ( start = "" );
	( end == "none" || isAffine( end ) ) && ( end = "" );

	// if end starts with the current computed style, this is a relative animation
	// store computed style as the origin, remove it from start and end
	if ( start && end && !end.indexOf("matrix") && toArray( start ).join() == toArray( end.split(")")[0] ).join() ) {
		list.origin = start;
		start = "";
		end = end.slice( end.indexOf(")") +1 );
	}

	if ( !start && !end ) { return; }

	// start or end are affine, or list of transform functions are identical
	// => functions will be interpolated individually
	if ( !start || !end || functionList(start) == functionList(end) ) {

		start && ( start = start.split(")") ) && ( l = start.length );
		end && ( end = end.split(")") ) && ( l = end.length );

		while ( ++i < l-1 ) {
			start[i] && ( currStart = start[i].split("(") );
			end[i] && ( currEnd = end[i].split("(") );
			currType = $.trim( ( currStart || currEnd )[0] );

			append( list.start, parseFunction( currType, currStart ? currStart[1] : 0 ) );
			append( list.end, parseFunction( currType, currEnd ? currEnd[1] : 0 ) );
		}

	// otherwise, functions will be composed to a single matrix
	} else {
		list.start = unmatrix(matrix(start));
		list.end = unmatrix(matrix(end))
	}

	return list;
}

function parseFunction( type, value ) {
	var
		// default value is 1 for scale, 0 otherwise
		defaultValue = +(!type.indexOf(_scale)),
		scaleX,
		// remove X/Y from scaleX/Y & translateX/Y, not from skew
		cat = type.replace( /e[XY]/, "e" );

	switch ( type ) {
		case _translate+"Y":
		case _scale+"Y":

			value = [
				defaultValue,
				value ?
					parseFloat( value ):
					defaultValue
			];
			break;

		case _translate+"X":
		case _translate:
		case _scale+"X":
			scaleX = 1;
		case _scale:

			value = value ?
				( value = value.split(",") ) &&	[
					parseFloat( value[0] ),
					parseFloat( value.length>1 ? value[1] : type == _scale ? scaleX || value[0] : defaultValue+"" )
				]:
				[defaultValue, defaultValue];
			break;

		case _skew+"X":
		case _skew+"Y":
		case _rotate:
			value = value ? toRadian( value ) : 0;
			break;

		case _matrix:
			return unmatrix( value ? toArray(value) : [1,0,0,1,0,0] );
			break;
	}

	return [[ cat, value ]];
}

function isAffine( matrix ) {
	return rAffine.test(matrix);
}

function functionList( transform ) {
	return transform.replace(/(?:\([^)]*\))|\s/g, "");
}

function append( arr1, arr2, value ) {
	while ( value = arr2.shift() ) {
		arr1.push( value );
	}
}

// converts an angle string in any unit to a radian Float
function toRadian(value) {
	return ~value.indexOf("deg") ?
		parseInt(value,10) * (Math.PI * 2 / 360):
		~value.indexOf("grad") ?
			parseInt(value,10) * (Math.PI/200):
			parseFloat(value);
}

// Converts "matrix(A,B,C,D,X,Y)" to [A,B,C,D,X,Y]
function toArray(matrix) {
	// remove the unit of X and Y for Firefox
	matrix = /([^,]*),([^,]*),([^,]*),([^,]*),([^,p]*)(?:px)?,([^)p]*)(?:px)?/.exec(matrix);
	return [matrix[1], matrix[2], matrix[3], matrix[4], matrix[5], matrix[6]];
}

$.transform = {
	centerOrigin: "margin"
};

})( jQuery, window, document, Math );


================================================
FILE: jquery.transform3d.js
================================================
/*
 * transform: A jQuery cssHooks adding 2D/3D transform capabilities to $.fn.css() and $.fn.animate()
 *
 * Requirements:
 * - jQuery 1.5.1+
 * - jquery.transition.js for animations
 * - browser implementing W3C's CSS 2DTransforms for 2D tranform
 * - browser implementing W3C's CSS 3DTransforms for 3D tranform
 *
 * latest version and complete README available on Github:
 * https://github.com/louisremi/jquery.transform.js
 *
 * Copyright 2011 @louis_remi
 * Licensed under the MIT license.
 *
 * This saved you an hour of work?
 * Send me music http://www.amazon.co.uk/wishlist/HNTU0468LQON
 *
 */
(function( $, window, document ) {
"use strict";

var div = document.createElement("div"),
	divStyle = div.style,
	prefixes = [
		"O",
		"ms",
		"Webkit",
		"Moz"
	],
	prefix,
	i = prefixes.length,
	properties = [
		"transform",
		"transformOrigin",
		"transformStyle",
		"perspective",
		"perspectiveOrigin",
		"backfaceVisibility"
	],
	property,
	j = prefixes.length;

// Find the right prefix
while ( i-- ) {
	if ( prefixes[i] + leadingUppercase( properties[0] ) in divStyle ) {
		prefix = prefixes[i];
		continue;
	}
}

// This browser is not compatible with transforms
if ( !prefix ) { return; }

// Build cssHooks for each property
while ( j-- ) {
	property = prefix + leadingUppercase( properties[j] );

	if ( property in divStyle ) {

		// px isn't the default unit of this property
		$.cssNumber[ properties[j] ] = true;

		// populate cssProps
		$.cssProps[ properties[j] ] = property;

		// MozTranform requires a complete hook because "px" is required in translate
		property === "MozTransform" && ($.cssHooks[ properties[j] ] = {
			get: function( elem, computed ) {
				return (computed ?
					// remove "px" from the computed matrix
					$.css( elem, property ).split("px").join(""):
					elem.style[property]
				);
			},
			set: function( elem, value ) {
				// add "px" to matrices
				/matrix\([^)p]*\)/.test(value) && (
					value = value.replace(/matrix((?:[^,]*,){4})([^,]*),([^)]*)/, "matrix$1$2px,$3px")
				);
				elem.style[property] = value;
			}
		});

	}
}

function leadingUppercase( word ) {
	return word.slice(0,1).toUpperCase() + word.slice(1);
}

})( jQuery, window, document );

================================================
FILE: package.json
================================================
{
    "name": "transform",
    "version": "1.0",
    "title": "Add a transform property to $.fn.css() and $.fn.animate()",
    "author": {
        "name": "Louis-Rémi",
        "url": "http://twitter.com/louis_remi"
    },
    "licenses": [
        {
            "type": "MIT",
            "url": "http://louisremi.mit-license.org"
        }
    ],
    "dependencies": {
        "jquery": ">=1.4.3",
        "transition": "*"
    },
    "description": "This plugins makes it possible to use and animate 2D Transforms in all browsers, as well as 3D Transforms in compatible browsers.",
    "keywords": [
        "DOM",
        "animate",
        "transform",
        "2D",
        "3D",
        "CSS3",
        "cssHooks"
    ],
    "homepage": "https://github.com/louisremi/jquery.transform.js",
    "files": [
        "jquery.transform2d.js",
        "jquery.transform3d.js"
    ]
}


================================================
FILE: test/example3d.html
================================================
<!DOCTYPE html>
<html>
<head>
<style>
	#wrapper {
		position: relative;
		top: 50px;
		left: 50px;
		width: 300px;
	}

	.face {
		width: 40px;
		height: 40px;
		position: absolute;
		display: inline-block;
		background: url(data:image/png;base64,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) 0px no-repeat;
		-moz-transform-origin: 20px 20px 20px;
		-webkit-transform-origin: 20px 20px 20px;
	}
	
	#f1 {
		background-position: -80px 0;
		z-index: 2;
		-moz-transform:  rotateX(30deg) rotateY(20deg);
		-webkit-transform:  rotateX(30deg) rotateY(20deg);
	}
	
	#f2 {
		background-position: -120px 0;
		-moz-transform:  rotateX(30deg) rotateY(110deg);
		-webkit-transform:  rotateX(30deg) rotateY(110deg);
	}
	
	#f3 {
		-moz-transform:  rotateX(30deg) rotateY(200deg);
		-webkit-transform:  rotateX(30deg) rotateY(200deg);
	}
	
	#f4 {
		background-position: -40px 0;
		-moz-transform:  rotateX(30deg) rotateY(290deg);
		-webkit-transform:  rotateX(30deg) rotateY(290deg);
	}
</style>
</head>
<body>
<h1>Something you cannot do with CSS only</h1>
<div id="wrapper">
	<a href="http://github.com/louisremi" id="f1" class="face" data-rotateY="20"></a>
	<a href="mailto:lrbabe@gmail.com" id="f2" class="face" data-rotateY="110"></a>
	<a href="http://facebook.com/lrbabe" id="f3" class="face" data-rotateY="200"></a>
	<a href="http://twitter.com/louis_remi" id="f4" class="face" data-rotateY="290"></a>
</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.js"></script>
<script src="https://github.com/louisremi/jquery.transition.js/raw/master/jquery.transition.js"></script>
<script src="../jquery.transform3d.js"></script>
<script>
	$(function() {
		var blockHover,
			frontFace = "f1";
		$("#wrapper").delegate(".face", "mouseover", function() {
			// interactions should be blocked while the cube is spinning 
			// nothing should happen if hover happens on the front face
			if ( !blockHover && this.id != frontFace ) {
				var diff = +frontFace[1] - this.id[1];
				
				// handle special cases
				diff * diff == 9 && ( diff /= -3 );

				frontFace = this.id;
				blockHover = true;

				$(".face").each(function(i) {
					var $this = $(this),
						rotateY = 90 * diff + $this.data( "rotatey" );

					$this
						.animate({
							transform: "rotateX(30deg) rotateY(" + rotateY + "deg)",
							zIndex: this.id == frontFace ? 2:
											( Math.abs( +frontFace[1] - this.id[1] ) == 2 ? 0 : 1 )
						}).data( "rotatey", rotateY );

				// unlock interaction when spinning is finished
				}).last().queue(function() {
					blockHover = false;
					$(this).dequeue();
				});

			}
		});
	});
</script>
</body>
</html>


================================================
FILE: test/transform2d.html
================================================
<!DOCTYPE html>
<html>
<head>
<style>
	h2 {
		margin-top: 70px;
	}
	.ref, .rslt {
		width: 30px;
		height: 30px;
	}
	.ref {
		background: #c33;
		position: absolute;
		display: none;
	}
	.moz .ref {
		display: block;
	}
	.rslt {
		background: #3cc;
	}

	.relative {
		position: relative;
	}
	.absolute {
		position: absolute;
	}
</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
<script src="../jquery.transform2d.js"></script>
<script>function later(code) { setTimeout(code,2000);	}</script>
</head>
<body>
	<script>
		"MozTransform" in document.createElement("div").style && ( document.body.className = "moz" );
	</script>

	<h1>Visual tests of jquery.transform2d.js</h1>

	<h2><code>$elem.css("transform", "rotate(45deg)");</code></h2>
	<div class="ref" style="-moz-transform: rotate(45deg)"></div>
	<div id="test1" class="rslt"></div>
	<script>$("#test1").css("transform", "rotate(45deg)");</script>

	<h2><code>$elem.css("transform", "skewX(30deg) skewY(10deg)");</code></h2>
	<div class="ref" style="-moz-transform: skewX(30deg) skewY(10deg)"></div>
	<div id="test2" class="rslt"></div>
	<script>$("#test2").css("transform", "skewX(30deg) skewY(10deg)");</script>

	<h2><code>$elem.css("transform", "scale(2, .5)");</code></h2>
	<div class="ref" style="-moz-transform: scale(2, .5)"></div>
	<div id="test3" class="rslt"></div>
	<script>$("#test3").css("transform", "scale(2, .5)");</script>

	<h2><code>$elem.css("transform", "translate(100px, 10px)");</code></h2>
	<div class="ref" style="-moz-transform: translate(100px, 10px)"></div>
	<div class="relative">
		<div id="test4" class="rslt absolute"></div>
	</div>
	<script>$("#test4").css("transform", "translate(100px, 10px)");</script>

	<h2><code>$elem.css("transform", "matrix(.5, .433, -.5, 1.033, 50, -10)");</code></h2>
	<div class="ref" style="-moz-transform: matrix(.5, .433, -.5, 1.033, 50px, -10px)"></div>
	<div class="relative">
		<div id="test5" class="rslt absolute"></div>
	</div>
	<script>$("#test5").css("transform", "matrix(.5, .433, -.5, 1.033, 50, -10)");</script>

	<h2><code>$elem.css("transform", "rotate(45deg) translate(38px)");</code></h2>
	<div class="ref" style="-moz-transform: rotate(45deg) translate(38px)"></div>
	<div class="relative">
		<div id="test6" class="rslt absolute"></div>
	</div>
	<script>$("#test6").css("transform", "rotate(45deg) translate(38px)");</script>

	<h2><code>$elem.css("transform", "rotate(45deg) translateY(-68px) skewX(-30deg) scale(1.2) matrix(.5, .433, -.5, 1.033, 50, -10)");</code></h2>
	<div class="ref" style="-moz-transform: rotate(45deg) translateY(-68px) skewX(-30deg) scale(1.2) matrix(.5, .433, -.5, 1.033, 50px, -10px)"></div>
	<div class="relative">
		<div id="test7" class="rslt absolute"></div>
	</div>
	<script>$("#test7").css("transform", "rotate(45deg) translateY(-68px) skewX(-30deg) scale(1.2) matrix(.5, .433, -.5, 1.033, 50, -10)");</script>

	<h2><code>$elem.animate({"transform": "rotate(45deg)"});</code></h2>
	<div class="ref" style="-moz-transform: rotate(45deg)"></div>
	<div id="test8" class="rslt"></div>
	<script>later('$("#test8").animate({"transform": "rotate(45deg)"})');</script>

	<h2><code>$elem.animate({"transform": "rotate(45deg)"}, 0);</code></h2>
	<div class="ref" style="-moz-transform: rotate(45deg)"></div>
	<div id="test8b" class="rslt"></div>
	<script>later('$("#test8b").animate({"transform": "rotate(45deg)"}, 0)');</script>

	<h2><code>$elem.animate({"transform": "rotate(45deg) translateY(-68px) skewX(-30deg) scale(1.2) matrix(.5, .433, -.5, 1.033, 50, -10)}");</code></h2>
	<div class="ref" style="-moz-transform: rotate(45deg) translateY(-68px) skewX(-30deg) scale(1.2) matrix(.5, .433, -.5, 1.033, 50px, -10px)"></div>
	<div class="relative">
		<div id="test9" class="rslt absolute"></div>
	</div>
	<script>later('$("#test9").animate({"transform": "rotate(45deg) translateY(-68px) skewX(-30deg) scale(1.2) matrix(.5, .433, -.5, 1.033, 50, -10)"})');</script>

	<h2><code>$elem.css("transform", "rotate(45deg) translateY(-68px) skewX(-30deg) scale(1.2)").animate({"transform": "+=rotate(45deg) translateY(-68px) skewX(-30deg) scale(1.2)");</code></h2>
	<div class="ref" style="-moz-transform: rotate(45deg) translateY(-68px) skewX(-30deg) scale(1.2) rotate(45deg) translateY(-68px) skewX(-30deg) scale(1.2)"></div>
	<div class="relative">
		<div id="test10" class="rslt absolute"></div>
	</div>
	<script>
		$("#test10").css("transform", "rotate(45deg) translateY(-68px) skewX(-30deg) scale(1.2)");
		later('$("#test10").animate({"transform": "+=rotate(45deg) translateY(-68px) skewX(-30deg) scale(1.2)"})');
	</script>
</body>
</html>

================================================
FILE: test/transform3d.html
================================================
<!DOCTYPE html>
<html>
<head>
<style>
	h2 {
		margin-top: 70px;
	}
	.ref, .rslt {
		width: 30px;
		height: 30px;
	}
	.ref {
		background: #c33;
		position: absolute;
		display: none;
	}
	.moz .ref {
		display: block;
	}
	.rslt {
		background: #3cc;
	}

	.relative {
		position: relative;
	}
	.absolute {
		position: absolute;
	}
</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
<script src="https://github.com/louisremi/jquery.transition.js/raw/master/jquery.transition.js"></script>
<script src="../jquery.transform3d.js"></script>
<script>function later(code) { setTimeout(code,2000);	}</script>
</head>
<body>
	<script>
		"MozTransform" in document.createElement("div").style && ( document.body.className = "moz" );
	</script>

	<h1>Visual tests of jquery.transform3d.js</h1>

	<h2><code>$elem.css("transform", "rotate(45deg)");</code></h2>
	<div class="ref" style="-moz-transform: rotate(45deg)"></div>
	<div id="test1" class="rslt"></div>
	<script>$("#test1").css("transform", "rotate(45deg)");</script>

	<h2><code>$elem.css("transform", "skewX(30deg) skewY(10deg)");</code></h2>
	<div class="ref" style="-moz-transform: skewX(30deg) skewY(10deg)"></div>
	<div id="test2" class="rslt"></div>
	<script>$("#test2").css("transform", "skewX(30deg) skewY(10deg)");</script>

	<h2><code>$elem.css("transform", "scale(2, .5)");</code></h2>
	<div class="ref" style="-moz-transform: scale(2, .5)"></div>
	<div id="test3" class="rslt"></div>
	<script>$("#test3").css("transform", "scale(2, .5)");</script>

	<h2><code>$elem.css("transform", "translate(100px, 10px)");</code></h2>
	<div class="ref" style="-moz-transform: translate(100px, 10px)"></div>
	<div class="relative">
		<div id="test4" class="rslt absolute"></div>
	</div>
	<script>$("#test4").css("transform", "translate(100px, 10px)");</script>

	<h2><code>$elem.css("transform", "matrix(.5, .433, -.5, 1.033, 50, -10)");</code></h2>
	<div class="ref" style="-moz-transform: matrix(.5, .433, -.5, 1.033, 50px, -10px)"></div>
	<div class="relative">
		<div id="test5" class="rslt absolute"></div>
	</div>
	<script>$("#test5").css("transform", "matrix(.5, .433, -.5, 1.033, 50, -10)");</script>

	<h2><code>$elem.css("transform", "rotate(45deg) translate(38px)");</code></h2>
	<div class="ref" style="-moz-transform: rotate(45deg) translate(38px)"></div>
	<div class="relative">
		<div id="test6" class="rslt absolute"></div>
	</div>
	<script>$("#test6").css("transform", "rotate(45deg) translate(38px)");</script>

	<h2><code>$elem.css("transform", "rotate(45deg) translateY(-68px) skewX(-30deg) scale(1.2) matrix(.5, .433, -.5, 1.033, 50, -10)");</code></h2>
	<div class="ref" style="-moz-transform: rotate(45deg) translateY(-68px) skewX(-30deg) scale(1.2) matrix(.5, .433, -.5, 1.033, 50px, -10px)"></div>
	<div class="relative">
		<div id="test7" class="rslt absolute"></div>
	</div>
	<script>$("#test7").css("transform", "rotate(45deg) translateY(-68px) skewX(-30deg) scale(1.2) matrix(.5, .433, -.5, 1.033, 50, -10)");</script>

	<h2><code>$elem.css("transform", "rotateZ(45deg)");</code></h2>
	<div class="ref" style="-moz-transform: rotateZ(45deg)"></div>
	<div id="test8" class="rslt"></div>
	<script>$("#test8").css("transform", "rotateZ(45deg)");</script>

	<h2><code>$elem.css("transform", "matrix3d(.5,.433,0,0,-.5,1,0,0,0,0,1,0,50,-10,0,1)");</code></h2>
	<div class="ref" style="-moz-transform: matrix3d(.5,.433,0,0,-.5,1,0,0,0,0,1,0,50,-10,0,1)"></div>
	<div id="test9" class="rslt"></div>
	<script>$("#test9").css("transform", "matrix3d(.5,.433,0,0,-.5,1,0,0,0,0,1,0,50,-10,0,1)");</script>

	<h2><code>$elem.animate({"transform": "rotate(45deg)"});</code></h2>
	<div class="ref" style="-moz-transform: rotate(45deg)"></div>
	<div id="test10" class="rslt"></div>
	<script>later('$("#test10").animate({"transform": "rotate(45deg)"})');</script>

	<h2><code>$elem.animate({"transform": "scale(.5,1)"});</code></h2>
	<div class="ref" style="-moz-transform: scale(.5,1)"></div>
	<div id="test11" class="rslt"></div>
	<script>later('$("#test11").animate({"transform": "scale(.5,1)"})');</script>

	<h2><code>$elem.animate({"transform": "rotate(45deg) translateY(-68px) skewX(-30deg) scale(1.2) matrix(.5, .433, -.5, 1.033, 50, -10)}");</code></h2>
	<div class="ref" style="-moz-transform: rotate(45deg) translateY(-68px) skewX(-30deg) scale(1.2) matrix(.5, .433, -.5, 1.033, 50px, -10px)"></div>
	<div class="relative">
		<div id="test12" class="rslt absolute"></div>
	</div>
	<script>later('$("#test12").animate({"transform": "rotate(45deg) translateY(-68px) skewX(-30deg) scale(1.2) matrix(.5, .433, -.5, 1.033, 50, -10)"})');</script>

</body>
</html>

================================================
FILE: test/transformOrigin.html
================================================
<!DOCTYPE html>
<html>
<head>
<style>
	h2 {
		margin-top: 70px;
	}
	.ref, .rslt {
		width: 30px;
		height: 30px;
	}
	.ref {
		background: #c33;
		position: absolute;
		display: none;
	}
	.moz .ref {
		display: block;
	}
	.rslt {
		background: #3cc;
	}

	.relative {
		position: relative;
	}
	.absolute {
		position: absolute;
	}
</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
<script src="../jquery.transform2d.js"></script>
<!--[if lt IE 9]> <script src="../jquery.transformOrigin.js"></script> <![endif]-->
<script>function later(code) { setTimeout(code,2000);	}</script>
</head>
<body>
	<script>
		"MozTransform" in document.createElement("div").style && ( document.body.className = "moz" );
	</script>

	<h1>Visual tests of jquery.transformOrigin.js</h1>

	<h2><code>$elem.css({transformOrigin: "100% 100%", transform: "rotate(110deg)"});</code></h2>
	<div class="ref" style="-moz-transform-origin: 100% 100%; -moz-transform: rotate(110deg)"></div>
	<div id="test1" class="rslt"></div>
	<script>$("#test1").css({transformOrigin: "100% 100%", transform: "rotate(110deg)"});</script>
</body>
</html>