JSFiddle - React, Tailwind, and code Playground
HTML
<TABLE BORDER>
<TR>
<TD><IMG WIDTH = 16 SRC = 'https://image.freepik.com/iconen-gratis/roteren-pijl_318-1445.jpg' onclick="rotateImage('image0')"></TD>
<TD><IMG WIDTH = 16 SRC = 'https://image.freepik.com/iconen-gratis/roteren-pijl_318-1445.jpg' onclick="rotateImage('image1')"></TD>
</TR>
<TR>
<TD><img class = 'north' id = 'image0' src="http://yernana.co.uk/wp-content/uploads/2015/09/tickets.jpg" id="image" /></TD>
<TD><img class = 'north' id = 'image1' src="http://yernana.co.uk/wp-content/uploads/2015/09/tickets.jpg" id="image" /></TD>
</TR>
</TABLE>
CSS
.north {
transform:rotate(0deg);
-ms-transform:rotate(0deg); /* IE 9 */
-webkit-transform:rotate(0deg); /* Safari and Chrome */
}
.west {
transform:rotate(90deg);
-ms-transform:rotate(90deg); /* IE 9 */
-webkit-transform:rotate(90deg); /* Safari and Chrome */
}
.south {
transform:rotate(180deg);
-ms-transform:rotate(180deg); /* IE 9 */
-webkit-transform:rotate(180deg); /* Safari and Chrome */
}
.east {
transform:rotate(270deg);
-ms-transform:rotate(270deg); /* IE 9 */
-webkit-transform:rotate(270deg); /* Safari and Chrome */
}
JavaScript
function rotateImage(elementID) {
alert( 'Rotating' + elementID);
alert(document.getElementById(elementID).className);
if(document.getElementById(elementID).className == "north"){
alert('changing to west');
document.getElementById(elementID).className = 'west';
}
else if(document.getElementById(elementID).className == 'west'){
alert('changing to south');
document.getElementById(elementID).className = 'south';
}
else if(document.getElementById(elementID).className == 'south'){
alert('changing to east');
document.getElementById(elementID).className = 'east';
}
else if(document.getElementById(elementID).className =='east'){
alert('changing to north');
document.getElementById(elementID).className = 'north';
}
}