Click here to Skip to main content
15,917,951 members
Please Sign up or sign in to vote.
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:

can it done in java? I created one in css but didn't work on other than IE.
Updated 24-Aug-12 17:45pm
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

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[^]. 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,
Share this answer
Boudi AlSayed 25-Aug-12 19:38pm    
thanks, but this isn't what iam looking for, this transformation is like resizing not like the picture that I've add.
Ed Nutting 25-Aug-12 20:10pm    
Your picture shows rotation and that is what you asked for. That is precisely what this does - 3D rotation. Either you haven`tasked the right question out you cannot be bothered to read the properly - which is it?

Ed Nutting 25-Aug-12 20:13pm    
Oh and as your image appears to show perspective, if you read the page fully you`ll see that's supported too.
Boudi AlSayed 25-Aug-12 20:45pm    
oh, sorry I didn't read it all(That because I busy), but I already know this way and didn't use it since it doesn't work on all browsers, I'm looking for something works well on all web browsers and I know that it may be impossible to find that way.
Ed Nutting 25-Aug-12 21:42pm    
Your only solution has been suggested in a comment on your question -.use an animated gif image and wrap it in a link or use Javascript to detect when it is clicked.

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

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900