DEV Community

Takane Ichinose
Takane Ichinose

Posted on

1 1

#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.

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

Best practices for optimal infrastructure performance with Magento

Running a Magento store? Struggling with performance bottlenecks? Join us and get actionable insights and real-world strategies to keep your store fast and reliable.

Tune in to the full event

DEV is partnering to bring live events to the community. Join us or dismiss this billboard if you're not interested. ❤️