Rotating image or any element in CSS3 is easy, just set the
transform:rotate(-50deg); and you are done. To support across the browser you will need to use browser specific prefixes, however if you need to rotate the image based on the value given by the user then you will need to use client side script.
In the below code I am showing how to rotate an image based on the value given in the TextBox. Here I am using jQuery css method to set the CSS style to rotate the image. I am setting the degree to rotate by getting the value of the textbox.
<img src="images/dotnetlogo.gif" id="img1" />
<input type="text" id="txtDeg" value="30" />
<button onclick="Rotate()"> Rotate </button>
<script type="text/javascript">
function Rotate() {
$("#img1").css("-webkit-transform", "rotate("+ $("#txtDeg").val() + "deg)");
}
</script>
Hope this helps someone!
Regards,
Sheo Narayan
http://www.dotnetfunda.com