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.
Here 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.
Day 20 – Inspirational Cube