Free Transform jQuery Plugin (rotate, scale, move and more)

A great solution to transform DOM elements on the web page – yeah, it’s the Free Transform jQuery Plugin. Just try it!

A brilliant free transform jQuery plugin

The jquery-free-transform is a plugin for jQuery that allows you to rotate, move, scale a DOM element on your web page, similar to the transform tool in Photoshop or Flash.

Provides simple controls that allows you to move/rotate/scale an element. A great base to implement interesting tools and cool effects.

Free Transform jQuery Plugin in action
Free Transform jQuery Plugin in action

Dependencies:

– jQuery
Matrix.js (awesome and simple Matrix lib)

Usage

The $.freetrans() method is used for all access to the plugin.

Initialization

When called without any parameters, the plugin will be initialized for the selector(s):


// initialize mydiv with free trans plugin
$('mydiv').freetrans();

// initialize all items with class myclass
$('.myclass').freetrans();

You can also initialize a div with options like so:

// initialize and set some properties
$('mydiv').freetrans({
  x: 100,
  y: 150,
  angle: 45
});

Demo / try the code (JSFiddle):

http://jsfiddle.net/66Bna/293

GitHub:

– here you will find also the documentation and settings

https://github.com/gthmb/jquery-free-transform

Enjoy!

Share:Share on Facebook1Share on Google+1Tweet about this on TwitterShare on LinkedIn1Pin on Pinterest1