Rotate images reminder

by Hannah McFarlane

HTML

<div style="border: 1px solid red;">
  <img id="myimage" src="http://upload.wikimedia.org/wikipedia/mediawiki/a/a9/Example.jpg" style="border: 3px solid silver;" />
</div>
<br>

<div style="text-align:right;margin-right:50px;">
<a href="#" id="autorotate">[ auto rotate ]</a>
<a href="#" id="alt-rotate">[ 90 deg anti-clock ]</a>
<a href="#" id="rotate90pos">[90 deg clockwise ]</a>
</div>

CSS

.autorot90 {
    -webkit-transform: rotate(90deg); /* Safari */
    -moz-transform: rotate(90deg); /* Firefox 3.6 Firefox 4 */
    -ms-transform:rotate(90deg); /* IE9 */
    -o-transform:rotate(90deg); /* Opera */
    transform: rotate(90deg); /* W3C */  
}

.alt-rot90 {
  -webkit-transform: translateX(-100%) rotate(-90deg); /* Safari */
  -moz-transform: translateX(-100%) rotate(-90deg); /* Firefox 3.6 Firefox 4 */
  -ms-transform:translateX(-100%) rotate(-90deg); /* IE9 */
  -o-transform:rotate(90deg); /* Opera */
  transform: translateX(-100%) rotate(-90deg); /* W3C */  
  transform-origin: top right;
}

.rotate90pos {
  transform: translateY(-100%) rotate(90deg); /* W3C */  
  transform-origin: bottom left;
}

JavaScript

$("#autorotate").click(
  function (e) { 
    $("#myimage").addClass("autorot90"); 
  }
);

$("#alt-rotate").click(
  function (e) { 
    $("#myimage").addClass("alt-rot90"); 
  }
);

$("#rotate90pos").click(
  function (e) { 
    $("#myimage").addClass("rotate90pos"); 
  }
);