Twist Image on Z-Axis in Javascript. Canvas?

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • Chuckhriczko
    New Member
    • May 2008
    • 6

    #1

    Twist Image on Z-Axis in Javascript. Canvas?

    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
  • acoder
    Recognized Expert MVP
    • Nov 2006
    • 16032

    #2
    This Canvas tutorial should help get you started.

    Comment

    • rnd me
      Recognized Expert Contributor
      • Jun 2007
      • 427

      #3
      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.

      Comment

      • Chuckhriczko
        New Member
        • May 2008
        • 6

        #4
        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

        Comment

        • acoder
          Recognized Expert MVP
          • Nov 2006
          • 16032

          #5
          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.mozil la.org/en/Canvas_tutorial/Basic_animation s

          Comment

          Working...