DEV Community

Cover image for Flip-line
Paul van Dinther
Paul van Dinther

Posted on

Flip-line

This Multi State button is perfect to toggle through a limited set of modes as needs little space and avoids distracting popups or panels. The satisfying toggle is quite addictive.

All you need is a handful of div elements and include a tiny but of javascript and CSS in your project.

You can style this any way you want. The control is fully responsive.

although there are 4 sides to this 3D control, you can have as few or as many options as you want.

Even the shade changes as the light angle changes on the surfaces. I can't wait to see what a more artistic designer can do with these.

Even though it looks like a cube, there are only ever two div's being animated. No point to mess around with elements you can't see.

optional element attributes: list - References the ID of a datalist direction - defines rotation direction "up", "down,""left" or "right" shading - defines in % how much % the base color is made lighter and darker as the cube rotates (Default is 60%) time - time it takes for a 90 degree turn. Expressed in ms. Default is 300ms.

Top comments (0)