View Full Version : clockwise or counterclockwise image rotation

08-03-2002, 04:46 AM
I am making a web page where the main focus will be an abstract image that users will have the power to spin or rotate on screen. The object is to change the angle of the image to allow people to see shapes and symbols within the abstractism. Think of the page as techno inkblot testing. Users will push a left or right button, scroll a bar or type in an angle and the image will react, adjusting its angle as directed. Is there anything written that does this? If not, where, with my basic JavaScripting skills should I start?

Muchly appreciative of any advice,
tanx in advance!


08-03-2002, 05:08 AM
javascript can't do that. you could do that with a java applet, or with flash, but not with javascript.

08-03-2002, 05:38 AM
IE has a proprietary filter: CSS property, and among the various transform you can apply through it, rotation is one of them.

http://www.webfx.eae.net uses it on their frontpage.

The only standards-compliant way to do this though would be to insert whatever content you have into an SVG <foreignObject> tag and apply a rotation transformation to it, though non-SVG-enabled-Mozilla browsers would require a plugin to view it.

08-03-2002, 08:07 PM
Thanks, to code something like that sounds out of my league. It would be nice to have it rotate smooth but I might be able to compromise with a slide show and finite amount of viewing angles. To start with at least, the point will be to launch this site, not drown in a script. Also maybe flash with action scripting would be a good way to go. I didn't see the example on the WebFX front page.

08-13-2002, 08:53 PM
Saw this nifty trick at this site:

kitbag.com (http://www.kitbag.com)

where some nike shoe products, you could view from different angles based on where the mouse was located. Turned out they used imagemaps, and if the mouse was over a particular vicinity, the image would change to that angle, you might want to try that, doesn't look too bad.

Here's a direct link to that example:


Hope it helped.


08-13-2002, 09:29 PM
jkd, whats the css proprietry filter code i could just to rotate an image? ive looked all over msdn but cant find it!

thanks, paul

08-13-2002, 09:44 PM

08-14-2002, 04:49 AM
schmirk said

.....I might be able to compromise with a slide show and finite amount of viewing angles.

If you have a graphics program that can rotate the image and create a finite number of images you can use an animated rollover script.


08-17-2002, 02:38 PM
beetle, thats exactly what i wanted, thanks. the only problem is it rotates the image from the left hand side. is there any way to get it to rotate from the centre? it looks silly with how it is at the moment! :(

here is the code i have so far (if you hold down P, it will rotate the picture):

document.onkeydown = keyDown
this.angle = 0

function keyDown() {
if (window.event.keyCode==80) {
SetRotation() } }

deg2rad = Math.PI * 2 / 360;

function SetRotation() {
this.angle += 10;
rad = this.angle * deg2rad;
costheta = Math.cos(rad);
sintheta = Math.sin(rad);
mydiv.filters.item(0).M11 = costheta;
mydiv.filters.item(0).M12 = -sintheta;
mydiv.filters.item(0).M21 = sintheta;
mydiv.filters.item(0).M22 = costheta; }

<div id="mydiv" style="width:25px; height:25px; filter:progid:DXImageTransform.Microsoft.Matrix(M11='1.0', sizingmethod='auto expand')"><img src="picture.gif" width="25" height="25"></div>

08-17-2002, 03:11 PM
Sorry, I don't know. Perhaps somebody who is more of a mathmetician than I can offer a solution.

08-22-2002, 11:31 PM
yes, these types of link will work but I have one issue that clubs them all, even the slide show. My images, in order to be properly enjoyed have to weigh in at around 100 kb. How many copies does it take to animate? Not feasible. Even at only 8 different angles, those with low bandwidth will simply not be able to enjoy the page. However, to load one copy of this image and turn it like a steering wheel, left and right, is feasible. This spells applet or flash.

08-22-2002, 11:46 PM
100kb? Goodness, that's big. What is it? What are the dimensions? Got a link? I'm sure it can be smaller...

08-24-2002, 02:28 AM
I havent posted any of the images yet, just feeling out where I am heading while I finish off some other work. The point will be to display photography in a high enough resolution that it can be enjoyed almost full screen or larger. The details in this display are important.