View Full Version : turn a picture

Jan 1st, 2007, 06:38 AM
using javascript (or ajax) is there a way I can turn a picture 360.
I want to put this option in my image gallery?

Jan 1st, 2007, 09:01 AM
You are in luck because Javascript is only capable of rotating images by 360 degrees and multiples thereof. The Javascript code you need to do that is:

<script type="text/javascript"></script>

Javascript is unable to rotate images by any other amount. The only way that you can give the appearance of rotating an image by other amounts using Javascript is to have one large image that is made up of smaller images showing the same object with different rotations and only show a cropped version of the image that displays the object with the required rotation. You can then change the rotation by using Javascript to update the CSS that defines what part of the big image is displayed by changing the cropping so that the new rotation is the part of the big image that shows.

Jan 1st, 2007, 07:11 PM
I found this


Looks kind of buggy to me and at a glance I don't really understand how it is achieving the results it gets.


Jan 1st, 2007, 10:01 PM
It does it the way I suggested by your having one huge image that contains a whole lot of smaller images of the same thing with different rotations and then changing which part of the large image actually displays so as to display that part wich shows the small image with the desired rotation.

Jan 1st, 2007, 10:27 PM
Actually it looks like it is creating divs for each pixel in the graphic then drawing the graphic for each div using the Math package to determine where that pixel should be based on a degree rotation and using styles for clipping to only show that one pixel in the right spot.

I think your idea would be better.


Jan 1st, 2007, 10:33 PM
there's no big image, just the regular one but the principle is similar.
It seems to work creating as many copies of the image as there are pixels in the image, and offsetting each one so that it effectively shows a pixel. It then positions these single-pixel 'windows' in such a way that it appears the image is rotated.

It's quite clever in my opinion, and the maths behind it is pretty complicated, but I can't really see it being practical, as it's quite slow, even on the small test images.

[edit]someone can type faster than me! :)