jQuery plugin for easy CSS3 transformation

Question

I wrote it more for educational reasons and less as something that can compete with existing alternatives.

But I enjoyed writing it and wish to get some feedback, JavaScript is my second language :)

(I hope the main issue is lack of comments, but I wonder if there is anything else hairy about the code)

Here is the main plugin code:

(function ($) {
 'use strict';
 /*
 * Base function for all transformations
 */
 function base(property, transformer, params) {
 var value = $.map(params, function (item, index) {
 return transformer.call(this, item);
 }).join(", ");
 return this.each(function () {
 var $this = $(this);
 var existingTransformation = $this.css("transform");
 if (existingTransformation === 'none') {
 existingTransformation = '';
 }
 if (existingTransformation !== '') {
 existingTransformation += ' ';
 }
 $this.css({
 transform: existingTransformation + property + "(" + value + ")"
 });
 });
 };
 /*
 * Numeric to string conversion internal helper functions
 */
 function suffixNumber(param, suffix){
 if (typeof param === "number") {
 param += suffix;
 } 
 return param;
 };
 function toDeg(param){
 return suffixNumber(param, "deg");
 }
 function toPx(param){
 return suffixNumber(param, "px");
 }
 function toPc(param){
 return suffixNumber(param, "%");
 }
 function toStr(param){
 return suffixNumber(param, "");
 }
 /*
 * The plugin's outer world functions
 */
 var functionParamTypes = {
 number:toStr,
 length:toPx,
 angle:toDeg
 }
 var functionNames = [
 {
 "name":"matrix",
 "type":functionParamTypes.length
 },
 {
 "name":"translate",
 "type": functionParamTypes.length
 },
 {
 "name":"translateX",
 "type": functionParamTypes.length
 },
 {
 "name":"translateY",
 "type": functionParamTypes.length
 },
 {
 "name":"scale",
 "type": functionParamTypes.number
 },
 {
 "name":"scaleX",
 "type": functionParamTypes.number
 },
 {
 "name":"scaleY",
 "type": functionParamTypes.number
 },
 {
 "name":"rotate",
 "type": functionParamTypes.angle
 },
 {
 "name":"skew",
 "type": functionParamTypes.angle
 },
 {
 "name":"skewX",
 "type": functionParamTypes.angle
 },
 {
 "name":"skewY",
 "type": functionParamTypes.angle
 },
 {
 "name":"matrix3d",
 "type": functionParamTypes.length
 },
 {
 "name":"translate3d",
 "type": functionParamTypes.length
 },
 {
 "name":"translateZ",
 "type": functionParamTypes.length
 },
 {
 "name":"scale3d",
 "type": functionParamTypes.length
 },
 {
 "name":"scaleZ",
 "type": functionParamTypes.length
 },
 {
 "name":"rotate3d",
 "type": functionParamTypes.angle
 },
 {
 "name":"rotateX",
 "type": functionParamTypes.angle
 },
 {
 "name":"rotateY",
 "type": functionParamTypes.angle
 },
 {
 "name":"rotateZ",
 "type": functionParamTypes.angle
 },
 {
 "name":"perspective",
 "type": functionParamTypes.angle
 }
 ];
 $.each(functionNames,function(index, item){
 var name = item.name, type = item.type;
 $.fn[name] = function () {
 return base.call(this, name, type, arguments); 
 }
 });
})(jQuery);

• Latest version can be found here

• Live demo can be found here

• Usage example can be found here

Answer 1

I like the demo, from a once over:

• the functionNames make my eyes glaze over, data tables variables should be sorted and tabbed in my mind:

   var functionNames = [ 
   { name: "matrix", type: functionParamTypes.length}, 
   { name: "matrix3d", type: functionParamTypes.length}, 
   { name: "perspective", type: functionParamTypes.angle },
   { name: "rotate", type: functionParamTypes.angle }, 
   { name: "rotate3d", type: functionParamTypes.angle }, 
   { name: "rotateX", type: functionParamTypes.angle }, 
   { name: "rotateY", type: functionParamTypes.angle }, 
   { name: "rotateZ", type: functionParamTypes.angle },
   { name: "scale", type: functionParamTypes.number}, 
   { name: "scale3d", type: functionParamTypes.length}, 
   { name: "scaleX", type: functionParamTypes.number}, 
   { name: "scaleY", type: functionParamTypes.number},
   { name: "scaleZ", type: functionParamTypes.length}, 
   { name: "skew", type: functionParamTypes.angle }, 
   { name: "skewX", type: functionParamTypes.angle }, 
   { name: "skewY", type: functionParamTypes.angle }, 
   { name: "translate", type: functionParamTypes.length}, 
   { name: "translate3d", type: functionParamTypes.length}, 
   { name: "translateX", type: functionParamTypes.length}, 
   { name: "translateY", type: functionParamTypes.length}, 
   { name: "translateZ", type: functionParamTypes.length} 
   ]; 
  

• It is preferred to have 1 single comma-separated var statement:

  var $this = $(this),
   existingTransformation = $this.css("transform");
  

• It is preferred to have either all single or all double quoted strings, I would suggest single quoted strings
• You have some missing and some unnecessary semicolons, please check out http://jshint.com/
• Other than that, a fun piece of code