#CodepenChallenge 3D Rotating Store Icon No Javascript

takaneichinose

Takane Ichinose

Posted on August 27, 2020

#CodepenChallenge 3D Rotating Store Icon No Javascript

Using the 3 colors that was on the challenge, I made this 3D store icon, without using any Javascript codes.

Though I used other colors to make the icon somehow colorful, I used the 3 main colors as the main. The others are just the background color, or some extra objects.

I also lighten, and darken the color, to make the 3d shading effect.

I made a 3D box generator by using Pug, and Sass mixins. This is to make the creations of objects easier, and also it makes the source code shorter (Uncompiled).

The trick in icon movement is just a simple invisible hover(able) div element, and select the icon sibling to do the rotation.

💖 💪 🙅 🚩
takaneichinose
Takane Ichinose

Posted on August 27, 2020

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related