Applying some effects to our images could be useful in order to achieve better user experience. One of the simplest effects that can be applied to images is rotation. We can rotate and grade an image on the screen of the device. This recipe explains how to apply this effect with only a little bit of CSS code.
The WebKit engine used by Safari Mobile defines specific properties for applying effects and simple transitions to HTML elements. We're going to use them directly; however, the iWebKit framework will be useful for defining an initial layout for our image. Be sure that you've installed this framework in your computer before continuing.
As you've seen in the previous recipe about how to display an image inside a container, we'll use a standard XHTML file with some references to the JavaScript and CSS files provided by iWebKit.
1. The main lines for loading this framework are the following:
<link href="../iwebkit/css/style.css" rel="stylesheet...