Transform Image UI

The Transform Image UI (User Interface) is a CSS3 & Javascript based component that will transform an image live on-screen according to user actions. Resize, rotate & flip (horizontal and vertical) options are all available, allowing the image to be transformed in a dynamic, user friendly and interesting way.

When the user is happy with their transforms and the image is as they'd like, the hidden form fields can be submitted (such as when the user clicks a button to confirm their transform actions are complete) and of course used by a another script to take further action, such as using perhaps ASP.net or PHP to actually apply those transforms to an image on the web server.

Setup

This component has been built so it can be deployed easily to your own project, though the quickest way to get things up and running would be to use all the component files provided. Just change the src attribute to that of your image and when you open this webpage in your web browser, your image will appear, along with transform controls (when you mouse over the image).

When the form is submitted, it will send form fields containing the transform values via a POST sending method for you to pick up and use with your next page of code/script.

Requirements

This component has been built to take advantage of the CSS3 transform and transition properties. It also makes significant use of JavaScript. For these reasons, it should be noted that this component works with modern web browsers and is not necessarily backwards compatible with older browsers who do not support the latest CSS properties. Browsers that should support the necessary CSS3 properties include Chrome 9+, Firefox 4+, Internet Explorer 9+, Safari 5+ and Opera 11+.