<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8">
<title>2-D Transforms</title>
<style>
#rotate20 {transform:rotate(20deg);}
#translate {transform:translate(500px, 0px);}
#scale1 {transform:scale(0.5, 0.7) translate(600px, 20px);}
#skew1 {transform:skew(15deg, 20deg);}
#skew2 {transform:skew(-10deg, 0deg);}
</style>
</head>
<body>
<p><img src="images/blue_swallow.jpg" width="250" height="126" alt="Blue Swallow Motel"><br>Original</p>
<p id="scale1"><img src="images/blue_swallow.jpg" width="250" height="126" alt="Blue Swallow Motel"><br>Scaled 0.5 x 0.7<br>Translation 600px right, 20px down</p>
<p id="rotate20"><img src="images/blue_swallow.jpg" width="250" height="126" alt="Blue Swallow Motel"><br>20° Rotation</p>
<p id="translate"><img src="images/blue_swallow.jpg" width="250" height="126" alt="Blue Swallow Motel"><br>Translation 500px right</p>
<p id="skew1"><img src="images/blue_swallow.jpg" width="250" height="126" alt="Blue Swallow Motel"><br>Skewed 15°/20°</p>
<p id="skew2"><img src="images/blue_swallow.jpg" width="250" height="126" alt="Blue Swallow Motel"><br>Skewed -10°/0°</p>
</body></html>
