HexaFlip – a flexible 3D cube in JavaScript

HexaFlip is an awesome JS library, which allows users to flip the cube on drag. Everything with 3D animation effects!

A tutorial about creating HexaFlip – 3D cube in JavaScript

HexaFlip is a JavaScript UI plugin, that let’s you use 3D cubes as interface elements. Dive into the process of creating the plugin and learn some best practices regarding flexible UI plugins.

HexaFlip visualizes arrays as cube interfaces. Featuring touch / mouse interaction, getter / setter methods, zero dependencies, and jQuery support.

Rotating cubes would serve for a more unique and memorable user experience. As we all know, a cube has six (i.e. “hexa”) faces, but when rotating it around a single axis, we only have four to work with (front, top, back, and bottom).

An example of 3D cube in JavaScript
An example of 3D cube in JavaScript

Demos:

http://tympanus.net/Tutorials/HexaFlip

A full tutorial with details:

http://tympanus.net/codrops/2013/03/07/hexaflip-a-flexible-3d-cube-plugin

Get the HexaFlip 3D cube in JavaScript solution from GitHub:

https://github.com/dmotz/hexaflip

You may also like:

CSS modal dialogs tutorial

Enjoy!

Share:Share on Facebook1Share on Google+0Tweet about this on TwitterShare on LinkedIn1Pin on Pinterest1