csscompat.js

var CSSMatrix;

if (navigator.userAgent.indexOf("Gecko") !== -1 && navigator.userAgent.indexOf("KHTML") === -1) {
  CSSStyleDeclaration.prototype.__defineGetter__("borderRadius",function() {
    return this.MozBorderRadius;
  });
  CSSStyleDeclaration.prototype.__defineSetter__("borderRadius",function(x) {
    this.MozBorderRadius = x;
  });
  CSSStyleDeclaration.prototype.__defineGetter__("userSelect",function() {
    return this.MozUserSelect;
  });
  CSSStyleDeclaration.prototype.__defineSetter__("userSelect",function(x) {
    this.MozUserSelect = x;
  });
  CSSStyleDeclaration.prototype.__defineGetter__("transform",function() {
    return this.MozTransform;
  });
  CSSStyleDeclaration.prototype.__defineSetter__("transform",function(x) {
    this.MozTransform = x.toString();
  });
  /*
  ⎛a c e⎞
  ⎜b d f⎟
  ⎝0 0 1⎠
  */
  CSSMatrix = function() {
    if (arguments.length === 6) {
      this.a = arguments[0];
      this.b = arguments[1];
      this.c = arguments[2];
      this.d = arguments[3];
      this.e = arguments[4];
      this.f = arguments[5];
    } else {
      // identity matrix
      this.a = 1;
      this.b = 0;
      this.c = 0;
      this.d = 1;
      this.e = 0;
      this.f = 0;
    }
  };
  CSSMatrix.prototype = {
    // missing: setMatrixValue,multiply,multiplyLeft,inverse,translate,scale,skew,rotate
    multiply: function(other) {
      return new CSSMatrix(
        this.a*other.a+this.c*other.b,
        this.b*other.a+this.d*other.b,
        this.a*other.c+this.c*other.d,
        this.b*other.c+this.d*other.d,
        this.a*other.e+this.c*other.f+this.e,
        this.b*other.e+this.d*other.f+this.f
      );
    },
    translate: function(x,y) {
      return this.multiply({
        a:1,c:0,e:x,
        b:0,d:1,f:y
      });
    },
    scale: function(sx,sy) {
      return this.multiply({
        a:sx,c:0,e:0,
        b:0,d:sy,f:0
      });
    },
    toString: function() {
      return "matrix("+this.a+","+this.b+","+this.c+","+this.d+","+this.e+"px,"+this.f+"px)";
    }
  };
}

if (navigator.userAgent.indexOf("WebKit") !== -1) {
  CSSStyleDeclaration.prototype.__defineGetter__("borderRadius",function() {
    return this.webkitBorderRadius;
  });
  CSSStyleDeclaration.prototype.__defineSetter__("borderRadius",function(x) {
    this.webkitBorderRadius = x;
  });
  CSSStyleDeclaration.prototype.__defineGetter__("userSelect",function() {
    return this.webkitUserSelect;
  });
  CSSStyleDeclaration.prototype.__defineSetter__("userSelect",function(x) {
    this.webkitUserSelect = x;
  });
  CSSStyleDeclaration.prototype.__defineGetter__("transform",function() {
    return this.webkitTransform;
  });
  CSSStyleDeclaration.prototype.__defineSetter__("transform",function(x) {
    this.webkitTransform = x;
  });
  CSSMatrix = WebKitCSSMatrix;
  // missing: multiplyLeft, skew
}