WebDev For You - Daily Interaction #92

Welcome to daily interaction #92! I love 3d-effects! This one was a lot of fun. It’s just a simple 3d box that rotates in the center of the viewport as the user moves their mouse around. It took me a moment to get the 3d box to rotate from the center until I applied a color to the cube wrapper and saw that the cube was sitting on top of the wrapper rather than in the center. So I moved each side of the box forwards 50px since each side is 100px by 100px. This placed each side in the center of the wrapper so when the wrapper rotates the cube rotates from the center :D. I moved each side forward 50px on the z-index. I could have placed the sides in another wrapper and moved that wrapper forwards 50px on the z-axis, but I thought moving each side forward would allow for more creativity afterwards :). I also left all the sides grey. I had many ideas for different colors, text, or images that could be placed on each side, but I wanted to focus more on the actual animation.