Element.Style.Transform is a project mainly written in JavaScript, it's free.
An abstracted API for CSS3 transforms
STATE: very alpha, API is likely to change and is not well tested yet.
Brings a simple cross browser API for CSS3 transforms. It will use the CSS transform property if it exists, or the MS filter property.
Each method or function has a plural function that accepts an object with key/value pairs. For example setTransform
becomse setTransforms
.
Transform an element.
myElement.setTransform(property, value);
myElement.setTransform('rotate', 30); // myElement will rotate 30 degrees
Get the value of a transform.
myElement.getTransform(property)
Element.Transform.defaults
or null
Define a custom function for special transforms
Element.Transform.defineTransform(property, fn);
fn (value)
Define a custom function for IE filter transforms. Because it is only possible to mimic CSS3 Transforms in IE, there should be a custom function that mimics the transform behaviour in IE.
Element.Transform.defineFilter(property, fn);
fn (value)
It is possible to use setStyle and getStyle as well if you prepend transform-
to the property, e.g. transform-scale
.
Since setStyle and getStyle methods are supported, it is possible to use Fx.Tween and Fx.Morph with transforms.
new Fx.Tween('element').start('transform-rotate', 20, 40); // rotates the element from 20 to 40 degrees
new Fx.Morph('rotate').start({
'transform-rotate': [0, 80],
'transform-scale': [1, 2]
});