css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.
user profile image

An experiment using a combination of CSS3 and JavaScript to animate a cube based on mouse and touch events. Each individual side of the cube's content is automatically rotated as the user moves the cube to keep the content viewable from any angle.

Comments

  1. That's fucking bad ass man, I really like that!! I'm currently working on almost the exact same thing, but instead of a cube I'm making a 3d pyramid. Although, I am planning on doing a cube as well once I finish the pyramid, so I am glad I found yours for reference and inspiration. Nice job!!

  2. Hey really great work but I notice that the top and bottom (1,6) are somewhat permanently fixed at there position and don't really spit correctly with the rest of the cube... any possibility of you being able to fix this for me? Would love to use this on a project but it needs the tops and bottoms to spin correctly.. I could compensate you as well if your interested.

  3. Hi @trupixel,

    I will need to re-visit the code and see if I can remove the 1,6 constraints. Do you have an email address?

    Thanks,

    Jordan.

  4. This is amazing! Is it allowed to use this code in own projects?

  5. I get a console error on line 295. The code does not make the cube spin when you mouse over. Am I missing something? Thanks

  6. @kingdr360 not sure why you get an error? What browser are you using?

  7. I used both Chrome and Firefox. I cleared my editor and redid a couple of times. The cube renders fine but I can't get the JS to wok. I am going to try it embedded in the HTML instead of a separate file. Thanks for responding. I will keep at it. If I figure it out I will give you an update.

  8. Sriram @SriRamBharani on

    hi bro awesome work. I tried to use the JS code as a an external script but the cube doesn't spin. My question is whether the script has be used as internal script in html file or can it be used as external file script. Thank you.

  9. Hi Jordan, quick question, what libraries / plugins does this use? Also, it is throwing a browser error in the JS line 273:

    this.element.style[userPrefix.js + 'Transform'] = 'rotateX(' + this.positionY + 'deg) rotateY(' + this.positionX + 'deg)';

    Error: Uncaught TypeError cannot read property 'style' of undefined at Viewport.Animate

    Im learning JS and have looked over everything, but cant figure it out. I hope all is well.

  10. @bbelluschi There are no libraries used. document.getElementsByClassName('cube')[0] is undefined which probably means you have no element with the className of 'cube' on your page.

  11. I copied and pasted the css, html and JS directly into a blank page, but it still has an error at line 273. I am a beginner :-( but I am trying my best to figure it out. Wouldnt the error come from (userPrefix.js + 'Transform')? Sorry for bothering you with all my noob questions...

  12. @bbelluschi If you create a GIST or a Codepen example and share the link with me I will take a look for you :)

  13. I am using webstorm. I will explain what I did, and I may be way off, so bear with me. I copied the css from your cube to a css file named style.css, then the html to a html file called index.html, then the js to a file called index.js. Then I opened live debugger in Chrome. That is how I see the error. I didnt change any code, nothing. I can do a gist, or code pen, but I would just be duplicating what you have here. Teaching myself this stuff is incredibly difficult when I dont have anyone to ask questions:-(

  14. The only thing I added to the html file was calling the css and js.

  15. Like so: link href="style.css" rel="stylesheet" type="text/css" script src="index.js"></script

  16. @bbelluschi I can't view that link. Please create on https://gist.github.com

  17. Hi Jordan Leigh , Thank you for this nice work. Could you add a destroy function that, when called, remove all event handling with the aim of avoiding memory leak when creating / removing many cubes ?

  18. @lamoi-kaji Sorry but I have no time to do this right now...

  19. Thanks for sharing! I use this tool as a reference to draw cubes from different angles.

    However, what should I adjust in the code (either HTML, CSS or JS) to adjust the length and width of the cube/cuboid? And how can I thicken the lines of the edges?

  20. @pressbird You can use the CSS to change the size. Where you see 200 you can change your desired unit. There is also a CSS perspective property that will need to change based on your unit. Each side uses an image, so that's where the lines on the edges come from. HTH

  21. @jojrdizle Thanks. I've noticed that I have to use the half of the size for CSS perspective properties. Is it also possible to create elongated cuboids with e.g. 300 px height and 200 px width? What should I adjust in the CSS properties?

  22. Hey Jordan, Thanks for the great work. I have upgraded to iOS 11.3 and the cube is not behaving the same way as it was on 11.2. Are there any changes in the script for new version? Thanks!

  23. Hi @jordizle , I would like to use your code in one of my commercial project. Do you give me your agreement? Thanks in advance.

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.
Loading...
Loading...