Permalink
Browse files

first commit of jquery.transform3d.js

  • Loading branch information...
louisremi
louisremi committed Oct 19, 2011
1 parent 86ddc0d commit d2623321dd48b1d5c173202adca150bdecdddb86
Showing with 95 additions and 0 deletions.
  1. +95 −0 jquery.transform3d.js
View
@@ -0,0 +1,95 @@
+/*
+ * 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")
+ );
+ /matrix3d\([^)p]*\)/.test(value) && (
+ value = value.replace(/matrix3d((?:[^,]*,){12})([^,]*),([^,]*),([^,]*)/, "matrix3d$1$2px,$3px,$4px")
+ );
+ elem.style[property] = value;
+ }
+ });
+
+ }
+}
+
+function leadingUppercase( word ) {
+ return word.slice(0,1).toUpperCase() + word.slice(1);
+}
+
+})( jQuery, window, document );

0 comments on commit d262332

Please sign in to comment.