How to make image 3d Rotation in JavaScript

Question

3.00/5 (1 vote)

See more:

, +

Hello I want to make a 3d rotation button by JavaScript, not 3d formation, look at this picture: http://i32.servimg.com/u/f32/14/92/15/95/pictur10.png

can it done in java? I created one in css but didn't work on other than IE.

Posted 24-Aug-12 17:43pm

Boudi AlSayed

Updated 24-Aug-12 17:45pm

v2

Add a Solution

Comments

ridoy 25-Aug-12 2:35am

is it a rotating button?

Brandon Caruana 25-Aug-12 18:38pm

why not just do it with an animated gif? What is the reason for doing it with javascript specifically?

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Ed Nutting · Accepted Answer · 2012-08-25T09:49:00

Hi there,

This can be done in HTML5/CSS3 using CSS3 animation, keyframes and 3dtransform and will work in all browsers except IE9/lower and Opera. Alternatively, you can do it using just CSS3 3dtransform and JavaScript and that will work in all browsers except IE9/lower and Opera. Your final option is to try and use SVG or Canvas and JavaScript and detect mouse clicks to create a 3D rotating image that can be clicked on as though it were a button. I do not recommend this last option.

All of the info for doing all of this (including an understanding of programming JavaScript) can be found on www.w3schools.com[^]. Please see their HTML5, CSS3 and JavaScript tutorials/complete references/complete examples (for everything!). You could easily have looked all this up on the internet without asking a question if you just searched a little bit - a search for "HTML 3d" puts this page (the most important one that yuo need) just second in the list: W3Schools CSS3 3D Transforms[^]. I am surprised you managed to create something that worked only in IE...was it a Java plugin? If so, that nulls my surprise. Java plugins are not necessary. HTML5/CSS3/Javascript can do this for you provided you don't mind it not working in IE9/lower and Opera. IE10 does support this. Coming versions of Opera will support it.

Hope this helps,
Ed