Day 20 – Inspirational Cube

I was a little overwhelmed at the thought of making something 3D with css but it turned out to be not only simple, but really fun too! I looked at some awesome 3D cube examples such as this. My approach was to look at the methods but not the specific details.

So I knew that they split the cube into 6 divs and used translate in css to rotate the 6 faces into a 3d cube. I did not read about which values they used. This was the fun part: figuring out what values and which axis was needed to rotate the faces! I found myself using my own hand as a visual aid a lot. Rotating my hand around helped me to see how I needed the faces to move.
cubeHere is my cube with all the faces in the correct positions. Note that there is distance between the faces and the “edges” of the cube, this was because I had accidentally inserted padding for the divs.

Making the cube move was also really fun! I had to envision how I needed the div as a whole to move. For example, pressing on the right arrow button should show you the right side of the cube, which means rotating the cube as a whole to the left.

cube
A “next” button was added for mobile users and different quotes for each face. I like to make the cube spin super fast just for fun. I want to try to make more 3D things!

Day 20 – Inspirational Cube

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s