First we'll look at the HTML that we'll be using in the example and then we'll look at the initial styling added to the elements prior to being skewed.
Add the following code to the
<body>
of the template file:<div id="viewer"> <div id="flow"> <img src="img/beatles.jpg"> <img src="img/blink.jpg"> <img src="img/doves.jpg"> <img src="img/flash.jpg"> <img src="img/floyd.jpg"> <img src="img/jurassic.jpg"> <img src="img/naked.jpg"> <img src="img/prodigy.jpg"> <img src="img/xx.jpg"> <img src="img/zabiela.jpg"> </div> <ul> <li id="left"><a href="#" title="Move Left">Left</a></li> <li id="right"><a href="#" title="Move Right">Right</a></li> </ul> </div>
Save the page as
skew.html
. Next in a new file add the following code:#viewer...