How to rotate an image in JavaScript using CSS3?

Posted by Sheonarayan under Error and Solution on 6/2/2012 | Points: 10 | Views : 18370 | Status : [Administrator] | Replies : 3

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



Responses

Posted by: Ajay.Kalol on: 6/4/2012 [Member] Starter | Points: 25

Up
0
Down
http://ajaypatelfromsanthal.blogspot.in/2012/06/image-rotation-in-javascript.html


Here is Simplest example code of Image Rotation.

Tested Successfully in Mozilla and Chrome.

Enjoyy...

Ajay
ajaypatelfromsanthal.blogspot.in

Sheonarayan, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Caroline on: 4/17/2013 [Member] Starter | Points: 25

Up
0
Down
here is an example of rotating.
Imports System.IO
Imports System.Drawing.Printing
Imports RasterEdge.Imaging
Imports RasterEdge.Imaging.Processing

Dim Image As New RasterEdgeImaging()

Public Sub RotateImage()
If True Then
Dim LoadImage As New Bitmap("C:\\1.bmp")
Dim rotate As Graphics = Graphics.FromImage(LoadImage)
rotate.TranslateTransform(CType(bmp.Width, Single) / 2, CType(bmp.Height, Single) / 2)
rotate.RotateTransform(rotationAngle)
rotate.TranslateTransform(-CType(bmp.Width, Single) / 2, -CType(bmp.Height, Single) / 2)
rotate.InterpolationMode = InterpolationMode.HighQualityBicubic
rotate.DrawImage(img, New Point(0, 0))
rotate.Dispose()
Return LoadImage()
End If
End Sub
http://www.rasteredge.com/how-to/vb-net-imaging/rotate-image/

Sheonarayan, if this helps please login to Mark As Answer. | Alert Moderator

Login to post response