Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
js
 
 
 
 
 
 
 
 

README.md

jQuery.animateTransform ($.animate-Hook)

Problem

You cannot simply do something like

$("img").animate({
    "WebkitTransform":"rotate(90deg)",
    "MozTransform":"rotate(90deg)",
    "Transform":"rotate(90deg)"
},1000);

At the moment, jQuery is not able to animate CSS3 Transform Values like rotate, translate, scale.

Solution

Use jQuery.animateTransform.js to animate CSS3 Transform-Values (translate, translate3d, rotate, skew, scale). The Plugin is an extension for jQuery's animate-function, hooking into $.fx.step to animate the CSS3 Transform-values. That means there's no need for using an own function with an own syntax. Just animate them the way you learned it.

Example

$("img").animate({
    "Something":somevalue,
    "transform": {
        rotate:90,
        scale:1.5,
        et cetera
    }
},1000);

Demo

Visit my demo page for a detailed documentation and an interactive testing-tool.

About

jQuery.animateTransform allows you to animate CSS3 Transform-Values (translate, translate3d, skew, rotate, scale)

Resources

You can’t perform that action at this time.