Convert 3d Transforms to 2d Counterparts if 3d not supported

gradients.js

@@ -30,10 +30,18 @@
 		cssLinear = "background-image: -moz-linear-gradient(red, blue);background-image: -webkit-linear-gradient(red, blue);background-image: -o-linear-gradient(red, blue);background-image: linear-gradient(red, blue);",
 		cssRadial = "background-image: -moz-radial-gradient(circle, orange, red);background-image: -webkit-radial-gradient(circle, orange, red);background-image: -o-radial-gradient(circle,red, blue);background-image: radial-gradient(circle, orange, red);",
 		cssPropsArray = cssProps.split( rWhitespace );
+		linearDirections = ["to bottom", "to top", "to right", "to left"];
+		browserLinearDirections = ["top", "bottom", "left", "right"];
 		divStyle.cssText = cssLinear,
 		linearSettings = function ( value ) {
 			var parts = rLinearSettings.exec( value );
 			value = value.replace( new RegExp(parts[2], 'g') , $.support.linearGradient );
+			// Default linear directions are different than browser extension directions so replace if necessary
+			for(var i = 0; i < linearDirections.length; i++) {
+				if(value.indexOf(linearDirections[i]) > -1) {
+					value = value.replace(linearDirections[i], browserLinearDirections[i]);
+				}
+			}
 			return value;
 		},
 		radialSettings = function ( value ) {
@@ -65,7 +73,6 @@
 				$.cssHooks[ prop ] = {
 
 					set: function( elem, value ) {
-
 						if( rLinear.test( value ) ){
 							elem.style[ prop ] = linearSettings( value );
 						} else if ( rRadial.test( value ) ) {

transform.js

@@ -26,24 +26,35 @@ var div = document.createElement('div'),
 	propertyName = 'transform',
 	suffix = 'Transform',
 	testProperties = [
-		'O' + suffix,
-		'ms' + suffix,
-		'Webkit' + suffix,
-		'Moz' + suffix,
+		['O' + suffix, '-o-' + propertyName],
+		['ms' + suffix, '-ms-' + propertyName],
+		['Webkit' + suffix, '-webkit-' + propertyName],
+		['Moz' + suffix, '-moz-' + propertyName],
 		// prefix-less property
-		propertyName
+		[propertyName, propertyName]
 	],
 	i = testProperties.length,
 	supportProperty,
 	supportMatrixFilter,
+	support3dTransform = false,
 	propertyHook,
 	propertyGet,
 	rMatrix = /Matrix([^)]*)/;
 
 // test different vendor prefixes of this property
 while ( i-- ) {
-	if ( testProperties[i] in divStyle ) {
-		$.support[propertyName] = supportProperty = testProperties[i];
+	if ( testProperties[i][0] in divStyle ) {
+		$.support[propertyName] = supportProperty = testProperties[i][0];
+		// test for 3d Transforms support - http://tiffanybbrown.com/2012/09/04/testing-for-css-3d-transforms-support/
+		if( ! support3dTransform) {
+			// have to insert div to test
+			document.body.appendChild(div);
+			divStyle[testProperties[i][0]] = 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)';
+			support3dTransform = window.getComputedStyle(div).getPropertyValue(testProperties[i][1]);
+			support3dTransform = support3dTransform !== undefined && support3dTransform !== 'none';
+			// remove test div
+			document.body.removeChild(div);
+		}
 		continue;
 	}
 }
@@ -95,6 +106,37 @@ if ( supportProperty && supportProperty != propertyName ) {
 			}
 		}
 	}
+
+	// If 3d Transforms are not supported, replace them with 2d counterparts
+	if ( ! support3dTransform) {
+		propertyHook = {
+			set: function( elem, value ) {
+				if(value.indexOf('3d') > 0) {
+					// This method gets the params including format (px, em, pt, etc)
+					var matches = value.match(/\((.+?)\)/);
+					var params = matches[1].replace(/ /g, '').split(',');
+					var type = value.split('(');
+					value = type[0].replace('3d', '');
+					switch(type[0]) {
+						// Convert matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) to matrix(n,n,n,n,n,n)
+						case 'matrix3d':
+							// TODO: run calculation to convert matrix3d to matrix
+							break;
+						// Convert rotate3d(x,y,z,deg) to rotate(deg)
+						case 'rotate3d':
+							value = value + '(' + params[3] + ')';
+							break;
+						// Convert scale3d(x,y,z) to scale(x,y) and translate3d(x,y,z) to translate(x,y)
+						case 'scale3d':
+						case 'translate3d':
+							value = value + '(' + params[0] + ', ' + params[1] + ')';
+							break;
+					}
+				}
+				elem.style[supportProperty] = value;
+			}
+		}
+	}
 	/* TODO: leverage hardware acceleration of 3d transform in Webkit only
 	else if ( supportProperty == 'Webkit' + suffix && support3dTransform ) {
 		propertyHook = {