An abstracted API for CSS3 transforms
JavaScript
Switch branches/tags
Nothing to show
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
Source
Specs
.gitignore
.gitmodules
README.md
package.yml

README.md

Element.Style.Transform

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.

Usage

Each method or function has a plural function that accepts an object with key/value pairs. For example setTransform becomse setTransforms.

Element method: setTransform

Transform an element.

myElement.setTransform(property, value);

Arguments

  1. property - (string) Transform Property, e.g. rotate or scale
  2. value - (mixed) The value

Returns

  • The Element Instance

Example

myElement.setTransform('rotate', 30); // myElement will rotate 30 degrees

Element method: getTransform

Get the value of a transform.

myElement.getTransform(property)

Argument

  1. property - (string) Transform Property, e.g. rotate or scale

Returns

  • The value which is set by the setTransform method, a default value from Element.Transform.defaults or null

Function Element.Transform.defineTransform

Define a custom function for special transforms

Element.Transform.defineTransform(property, fn);

Arguments

  1. property - (string) Transform Property, e.g. rotate or scale
  2. fn - (function) A function that returns a string that will be set in the css transform property.

Signature

fn (value)

Function Element.Transform.defineFilter

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);

Arguments

  1. property - (string) Transform Property, e.g. rotate or scale
  2. fn - (function) A function that returns a string that will be set in the filter property.

Signature

fn (value)

Element methods: setStyle and getStyle

It is possible to use setStyle and getStyle as well if you prepend transform- to the property, e.g. transform-scale.

Fx

Since setStyle and getStyle methods are supported, it is possible to use Fx.Tween and Fx.Morph with transforms.

Examples

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]
});