Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: Javascript Java HTML , +
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 18:43pm
Edited 24-Aug-12 18:45pm
v2
Comments
ridoy at 25-Aug-12 2:35am
   
is it a rotating button?
TopThat.com at 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
good
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 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
  Permalink  
v2
Comments
abdallah alsayed at 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 at 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
Ed Nutting at 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 at 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 at 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
0 OriginalGriff 299
1 Maciej Los 295
2 Sergey Alexandrovich Kryukov 230
3 Aajmot Sk 191
4 Sinisa Hajnal 166
0 OriginalGriff 7,760
1 Sergey Alexandrovich Kryukov 7,072
2 DamithSL 5,604
3 Manas Bhardwaj 4,986
4 Maciej Los 4,785


Advertise | Privacy | Mobile
Web02 | 2.8.1411023.1 | Last Updated 25 Aug 2012
Copyright © CodeProject, 1999-2014
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