By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,633 Members | 1,842 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,633 IT Pros & Developers. It's quick & easy.

Twist Image on Z-Axis in Javascript. Canvas?

P: 6
I need to possibly twist an image on the z axis in Javascript. Here is the deal. We have sliding effects and so forth for our company's website but there is too much sliding. We want something more unique. We could do this in flash but I was looking for a way to possibly do it outside of flash. Essentially the effect we are trying to pull off makes an image twist. Imagine you put your hand in the air. Moving it up and down is like the y axis. Left and right are the x axis. Twisting it is the z axis. Ive been looking around and assume canvas could work for this but can't find any examples that do it. Any ideas? Thanks.

Chuck
Jan 6 '09 #1
Share this Question
Share on Google+
4 Replies


acoder
Expert Mod 15k+
P: 16,027
This Canvas tutorial should help get you started.
Jan 6 '09 #2

rnd me
Expert 100+
P: 427
more than half your visitors won't see a canvas tag.
animated GIFs would be more crossbrowser.

sounds funny, but if done right they can work darn well, and look impressive.

you can use simple, 10 year old,
image rollover scripts to change the img .src in reaction to movement.

simply animating an image width reduction and expansion looks like a turning image. if you displayed a mirror image every-other time, and perhaps a drop-shadow that also animates, the effect is a convincing 3d rotation.
Jan 6 '09 #3

P: 6
Yeah I was considering animated gifs but I was curious about newer technology. For the most part, newer browsers can use Canvas. Primarily IE is the issue in which case we were going to use some type of script to overcome that. But your right, animated gifs are probably the best way to go. Any other ideas though I am still open ears. Even if I dont use it now it is good to know for the future when canvas because more popular. Thanks again,

Chuck
Jan 6 '09 #4

acoder
Expert Mod 15k+
P: 16,027
There is ExplorerCanvas which provides support for IE. However, the GIF route is probably best for the foreseeable future as the canvas tag is not really suited for animation as explained here (https://developer.mozilla.org/en/Canvas_tutorial/Basic_animations
Jan 9 '09 #5

Post your reply

Sign in to post your reply or Sign up for a free account.