How to Perform jQuery Transformations for CSS3 Sites - dummies

How to Perform jQuery Transformations for CSS3 Sites

By John Paul Mueller

It’s possible to use jQuery to perform transformations and these transformations are often more powerful, yet easier to use, than the native CSS3 transformations. However, in order to gain this functionality, you must download a jQuery plug-in — a special kind of library that extends the native jQuery functionality.

The best plug-in to perform the task is jquery.transform.js. You can go to this page and see the transformations demonstrated.

The host page doesn’t contain a link for downloading the plug-in, unfortunately. In order to obtain a copy of this plug-in, you go to Down Scripts and click the Click Here to Download link. You receive a .ZIP file containing a number of files, including the jquery.transform.js file that you must copy into your application directory.

To gain access to this plug-in, you add the following <script> tag after all of the other jQuery entries (position is important).

<script
 src="jquery.transform.js">
</script>

Using this plug-in works much like any other jQuery function call. This example relies on a <div> that contains a <p> with the required content. In this case, the example simply rotates the content, but you have access to all of the usual CSS transformations. The interesting part is the simplicity of the script used to perform the task.

<script type="text/javascript">
 $("#TransformMe").css("transform", "rotate(45deg)");
</script>

This script simply says to perform a standard CSS transformation of rotating the TransformMe <div> 45 degrees. In addition to static transformations, this plug-in also provides animated transformations using the animate() function with a timing function that defines how long to perform the animation.

It’s also quite easy to combine transformations to create various special effects. Make sure you try the examples in the test folder of the downloaded plug-in to see the full range of effects that this plug-in provides.