jQuery 2d transform

jQuery 2d transform

Released 7 years ago , Last update 6 years ago

A jQuery cssHooks adding cross-browser 2d transform capabilities to $.fn.css() and $.fn.animate()

With this jQuery transform plugin you will be able to:

  • rotate any element
  • scale an element as well as its text content
  • translate elements in an efficient way*
  • skew elements

The elements can be transformed instantly or the transformation can be animated, using the standard jQuery css() and animate() functions:

$('div.test').css( 'transform', 'rotate(10deg)' );

  transform: 'translateX(100px) translateY(50px) scale(2) rotate(90deg)'

It is the lightest, cleanest and most efficient plugin to achieve 2d transformation in a cross-browser way.

* no content reflow in modern browsers

  • 5 1
  • 4 0
  • 3 0
  • 2 0
  • 1 0
1 Reviews Read Reviews


14 day 14-day money-back guarantee


MIT license

The MIT license is an open-source license.


jquery.transform2d.js adds 2d transform capabilities to jQuery css() and animate() functions.


Set transform with a string

$('#myDiv').css('transform', 'translate(50px, 30px) rotate(25deg) scale(2,.5) skew(-35deg)');
$('#myDiv').animate({transform: 'translateY(-100px) rotate(1rad) scaleX(2) skewY(42deg)'});

You can use the following list of transform components:

  • translateX(<number>px)
  • translateY(<number>px)
  • combined: translate(<number>px, <number>px) the second number is optional and defaults to 0
  • scaleX(<number>)
  • scaleY(<number>)
  • combined: scale(<number>, <number>) the second number is optional and defaults to the value of the first one
  • rotate(<angle>) units for angles are *rad (default), deg or grad.*
  • skew(<angle>)
  • skew(<angle>)
  • combined: skew(<angle>, <angle>) the second angle is optional and defaults to 0
  • matrix(<number>, <number>, <number>, <number>, <number>, <number>)*

*matrix gives you more control about the resulting transformation, using a matrix construction set.
When using it in animations however, it makes it impossible to predict how the current and target transformations are going to be interpolated; there is no way to tell whether elements are going to rotate clockwise or anti-clockwise for instance.

Get transform

returns a computed transform matrix.

$('#myDiv').css('transform') == 'matrix(0,1,-1,0,100,50)';


  • requires jQuery 1.4.3+,
  • Should you use the translate property, then your elements need to be absolutely positioned in a relatively positioned wrapper or it will fail in IE,
  • transformOrigin is not accessible.

Why such restrictions with 'translate'?

Since translate is unavailable in IE<9, we have to emulate it using top and left properties of the element style.
This can, of course, only work if the elements are absolutely positioned in a relatively positioned wrapper.

Other plugins position the elements and wrap them transparently.
I think that transparently messing with the DOM often introduces unpredictable behavior.
Unpredictable behavior leads developers to fear plugins.
Fear leads to anger. Anger leads to hate. Hate leads to suffering.
I prefer leaving this up to you.


Dual licensed under GPL and MIT licenses.

Copyright (c) 2010 Louis-Rémi Babé.

1 license From » $19.99 View Licenses

Get A Quote

What do you need?
  • Custom development
  • Integration
  • Customization / Reskinning
  • Consultation
When do you need it?
  • Soon
  • Next week
  • Next month
  • Anytime

Thanks for getting in touch!

Your quote details have been received and we'll get back to you soon.

Or enter your name and Email
  • BK Brian Kawooya 5 years ago
    This script works well, but I do have a big issue. I have a div that has child elements(h1, img) that are absolutely positioned. When I rotate the parent div everything inside of it rotates but in IE8 they don't, on the parent div rotates. The only way everything rotates is only when those child elements aren't absolutely or relatively positioned. Any suggestions?