DEV Community

loading...

#CodepenChallenge 3D Rotating Store Icon No Javascript

takaneichinose profile image Takane Ichinose ・1 min read

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.

Discussion

pic
Editor guide