Element.Style additions, requires Accessor.js from MooTools 2.0

Element.Style.js

(function(){

var global = this,
	list = ['', 'webkit', 'Moz', 'O', 'ms'],
	prefixList = {},
	setStyle = Element.prototype.setStyle,
	getStyle = Element.prototype.getStyle;

var getPrefix = function(property){
	property = property.camelCase();
	var element = document.html;
	for (var i = 0; i < list.length; i++){
		var prefix = list[i];
		if (element.style[prefix ? prefix + property.capitalize() : property] != null)
			return prefix ? '-' + prefix.toLowerCase() + '-' : prefix.toLowerCase();
	}
	return '';
};

var getVendorPrefix = function(property){
	if (prefixList[property] != null) return prefixList[property];
	return (prefixList[property] = getPrefix(property));
};

var getStyleProperty = function(property){
	if (prefixList[property] != null) return prefixList[property] + property;
	return (prefixList[property] = getPrefix(property)) + property;
};

var transform = getStyleProperty('transform'),
	transformProperty = transform.camelCase().capitalize(),
	has3d = (function(){
		if (!('WebKitCSSMatrix' in global)) return false;

		var element = new Element('div');
		element.style[transform] = 'translate3d(1px, 0, 0)';
		try {
			if (new WebKitCSSMatrix(element.style[transform]).e == 1) return true;
		} catch(e){}
		return false;
	})();

Element.extend(new Accessor('StyleGetter')).extend(new Accessor('StyleSetter')).extend({

	getVendorPrefix: getVendorPrefix,
	getStyleProperty: getStyleProperty


}).implement({

	setStyle: function(property, value){
		property = getStyleProperty(property).camelCase();
		var setter = Element.lookupStyleSetter(property);
		if (setter){
			setter.call(this, value);
			return this;
		}
		return setStyle.call(this, property, value);
	},

	getStyle: function(property){
		property = getStyleProperty(property).camelCase();
		var getter = Element.lookupStyleGetter(property);
		return getter ? getter.call(this, property) : getStyle.call(this, property);
	}

}).defineStyleSetter(transform.camelCase(), function(value){
	if (typeof value != 'string'){
		// Speed! Relies on Array toString
		var style = [],
			translate = value.translate;

		if (value.translateX) style.push('translateX(' + value.translateX + ')');
		if (value.translateY) style.push('translateY(' + value.translateY + ')');
		if (value.translateZ) style.push('translateZ(' + value.translateX + ')');
		if (translate){
			var property = translate;
			if (typeof property == 'string') property = property.split(/\s*,\s*/);
			if (has3d && property.length == 2) property.push(0);
			if (!has3d && property.length == 3) property.pop();
			style.push('translate' + (has3d ? '3d' : '') + '(' + property + ')');
		}

		if (value.rotateX) style.push('rotateX(' + value.rotateX + ')');
		if (value.rotateY) style.push('rotateY(' + value.rotateY + ')');
		if (value.rotateZ) style.push('rotateZ(' + value.rotateX + ')');
		if (value.rotate) style.push('rotate(' + value.rotate + ')');
		if (value.skewX) style.push('skewX(' + value.skewX + ')');
		if (value.skewY) style.push('skewY(' + value.skewY + ')');
		if (value.skew) style.push('skew(' + value.skew + ')');
		if (value.scaleX) style.push('scaleX(' + value.scaleX + ')');
		if (value.scaleY) style.push('scaleY(' + value.scaleY + ')');
		if (value.scale) style.push('scale(' + value.scale + ')');
		if (value.matrix) style.push('matrix(' + value.matrix + ')');
		value = style.join(' ');
	}

	this.style[transformProperty] = value;
});

if (document.html.style.opacity != null) Element.Properties.opacity.set = function(value){
	this.style.opacity = value;
};

}).call(this);

Ever considered to use some value parsing lib? Sheet.js on properties branch can nicely parse all that matrix() crap (and convert back to string from object). It even keeps the order & stuff.

I wrote an author of Fx.css with the same proposition to use value parsing. There's just no reason to do that crap with strings.

Yeah, I thought about it. Not sure I want all the overhead Sheet.js creates, I should look into it and evaluate if it would be useful for me.

There's not much of overhead in Sheet.js. The parsers there are separate and have no dependencies (except sg-regex which is bundled by @subtleGradient) and the only overhead is the actual need to have extra package. But i suggest you to go further and try it, because it's totally cool and does what you need.

link me to the one that parses transforms, I was unable to find it

There's only the general CSS value parser. It parsers values with units, function calls (nested too), multiple declarations, strings and keywords into object. There's no parser specific to transformations. That's the beauty of Sheet.js, because there's only two parsers (stylesheet & value).

You can find it here:
https://github.com/Inviz/Sheet.js/blob/properties/Source/SheetParser.Value.js
https://github.com/Inviz/Sheet.js/blob/properties/Test/SheetParser.Value.test.js

Although there is a parser for webkit animation keyframes and that stuff. It's not really maintained anymore (but i soon will have to look into it), but you can find a remaining unit test here: https://github.com/Inviz/Sheet.js/blob/properties/Test/SheetParser.CSS.RegExp.test.js

There's also a full CSS3 property definition library with keywords and all possible values that parses any string value and splits them into properties (so called property expansion). It also invalidates incorrect values.

Useful to handle any values in any forms:
https://github.com/Inviz/Sheet.js/blob/properties/Source/SheetParser.Styles.js
https://github.com/Inviz/Sheet.js/blob/properties/Source/SheetParser.Property.js
https://github.com/Inviz/Sheet.js/blob/properties/Test/SheetParser.Property.test.js

If you think that's something's missing, then i'm open for suggestions

UPDATE: Fixed link

i know what exactly missing, it doesnt convert it to string out of the box. But it's very easy to do if you take closer look at the parsed values

To optimize this a bunch: http://jsfiddle.net/sEVYY/23/

...annnd...BOOM goes the dynamite.

Sheet FTW ^_^
#totallyUnbiasedThirdParty