Home

#What Universal CSS Transforms does, and what it is not able to do

The transform CSS property is by definition a list of transformation functions. This is probably the most complex type of css property (not a primitive value and not even a value list). It is a combination of one or more (up to 11) different functions, each of witch can be used more than once. Also, the order DOES matter.

Universal CSS Transforms is designed to be as simple to use, as possible. It attempts to provide a "native" support for those transform functions to jQuery. It is neither possible to make this simple, nor possible to support this in the jQuery way, so we have chosen different approach here. For the sake of functionality and simplicity, we do limit the transform property to a set of unique functions only. For example, if an element has a rotation and skew applied, setting a rotation will replace the existing one (in other words, each transform functions, can be used only once). This brings some limitations, but still covers 90% of use cases and allows us to make other useful things, like supporting our own css properties and mixing them with the regular ones...

All of the CSS transformation function names have been made available for use as a CSS property names with the $.fn.css() method. Those are:

* matrix
* rotate
* scale
* scaleX
* scaleY
* skew
* skewX
* skewY
* translate
* translateX
* translateY

Some of them can also be animated (see the limitations bellow).

Additionally the following are considered very useful and also supported:

transform

1. Aliases current transform property name. For example in gecko it's the same as "MozTransform", or in Webkit - "WebkitTransform"..., so just use "transform in any browser" (This also works in IE, or in other old browsers with no CSS transform support).
2. When used to set a transform (like $(elements).css("transform", cssstring);), the value is expected to be a valid css transform value, but it is less restrictive, than in CSS (will be parsed, unsupported functions will be ignored, all units are optional and so on).

multiplied-matrix - read only (available when using $.fn.css with a single strange argument "multiplied-matrix") returns a matrix, representing the current multiplied matrix. This means, that all the current transformation functions applied, are "merged" together and represented as a single matrix. It is useful to have a "multiplied-matrix" property, because the matrix multiplication is a complex task, and now we just have it's result at any time...

##Limitations

• Given CSS property can not be used more than once.
• You can mix transform properties, but you can not order them.
• "matrix" property can not be animated
• Only a single-argument functions can be animated. Others can be used as "subtype" functions:
  • Instead of scale use scaleX and scaleY
  • Instead of skew use skewX and skewY
  • Instead of translate use translateX and translateY
• The transform-origin property is not implemented (for IE and older browsers)