I coded this rotating 3D cube webpage using pure HTML, CSS, JavaScript, and logic from a tutorial

Показать описание

I’m still pretty proud of this “rotating cube” user experience that I implemented a few years ago. 📦
Look at the video; it kind of reminds me of the Price Is Right wheel lol.

I developed this using pure HTML, CSS, and JavaScript and a lot of the style and logic I got from an online tutorial.

First I wrote the HTML which is basically a shell of the cube; each face of the cube is a a styled div and their contents contained within.

Then I wrote the CSS to style the container divs for the cube as well as the faces/content. Using more complex CSS, I was able to give the appearance of a 3D cube by manipulating the position of the faces in the X, Y, and Z planes (thus 3 dimensional) to form a box/cube. The cube itself is also responsive (shaped to the size of the screen which is great for mobile).

Lastly, I wrote the JavaScript code for logic to rotate the cube based on up/down arrow key events and on scroll/swipe up and down. The logic includes dynamically applying CSS transitions/animations to make the rotation smooth.

Let me know what you guys think. I’ve been thinking about updating this site but I love the cube thing too much lol.

⁉️ Anyone have any complex CSS/styling they’ve done lately?

Let's connect!

Get my coding gear / desk setup 👨🏾‍💻