Click here to Skip to main content
13,141,637 members (50,315 online)
Rate this:
Please Sign up or sign in to vote.
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.
Posted 24-Aug-12 17:43pm
Updated 24-Aug-12 17:45pm
ridoy 25-Aug-12 2:35am
is it a rotating button? 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

Rate this: bad
Please Sign up or sign in to vote.

Solution 1

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,
abdallah 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.
abdallah 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)

  Print Answers RSS
Top Experts
Last 24hrsThis month

Advertise | Privacy |
Web03 | 2.8.170915.1 | Last Updated 25 Aug 2012
Copyright © CodeProject, 1999-2017
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100