An Image Viewer with the DMXzone Universal CSS Transforms Library

With this article Dan will introduce you the power of the Universal CSS Transforms Library for jQuery that was recently released to open source by the DMXzone team.

Summary

In this example we created a steampunked image viewer that uses the DMXzones Universal CSS transforms Library along with jQuery so display a series of images with nice transitions. Using the transforms Library is very easy and is achieved using jQuery's css or animate methods.

One thing you should be aware of is that using the Library in conjunction with transparent PNGs in IE can cause problems (as you may have noticed in the demo). The Library uses proprietary IE filters in order to make the CSS transitions available to IE and this unfortunately destroys the alpha channel in a transparent PNG. The situation can be mitigated slightly using a program like PNGOptimizer, which removes the alpha channel, although when the transitions are applied, the faulty alpha channel returns.

So go to GitHub and get your own copy of the Universal CSS Transforms Library and enjoy it!