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