hexagon-3d

A small service for providing styles object for CSS-based 3d hexagons with high interactivity capabilities. You may use these shapes as skeletons for various animations, images adding, videos playing, combining them into different forms, and doing a lot of other things. The capabilities of hexagons will be growing over time.

If you are building your project with React you can use React component wrapper for the hexagon service which provides a graphical HTML part out of the box: hexagon-3d-react

Live demo:

Hexagon3D

Explanation tutorial

You can read more about hexagon geometry, construction features, and package details in my Medium article.

Installation

npm install hexagon-3d

Usage

import hexagon3D from 'hexagon-3d';

or

const hexagon3D = require('hexagon-3d').default;

After importing hexagon service is ready to be used:

const hexagonData = hexagon3D({<parameters>});

Returned parameters than can be used to build an HTML structure for hexagon sides.

Example of usage

`<div style={hexagonData.container.style}>
    <div id={hexagonData.container.top.id} style={hexagonData.container.top.style}>
        {topChildren}
    </div>

    <div id={hexagonData.container.side1.id} style={hexagonData.container.side1.style}>
        {side1Children}
    </div>

    <div id={hexagonData.container.side2.id} style={hexagonData.container.side2.style}>
        {side2Children}
    </div>

    <div id={hexagonData.container.side3.id} style={hexagonData.container.side3.style}>
        {side3Children}
    </div>

    <div id={hexagonData.container.side4.id} style={hexagonData.container.side4.style}>
        {side4Children}
    </div>

    <div id={hexagonData.container.side5.id} style={hexagonData.container.side5.style}>
        {side5Children}
    </div>

    <div id={hexagonData.container.side6.id} style={hexagonData.container.side6.style}>
        {side6Children}
    </div>

    <div id={hexagonData.container.bottom.id} style={hexagonData.container.bottom.style}>
        {bottomChildren}
    </div>
`</div>

Parameters

Name	Type	Description	Values
width	number	Width of the hexagon (the biggest distance of it's 2 opposite points)	any
height	number	Height of the hexagon sides	any
rotateZ	number	Rotation degrees round Z axis	0-360
rotateX	number	Rotation degrees round X axis	0-360
showShadow	boolean	Flag to indicate whether faces border shadow should be shown (default - false)	true, false
shadowColor	string	Color of a faces border shadow	any
growTop	boolean	Flag which indicates how hexagone should change it's height - to the top or to the bottom. (default - false)	true, false
topBottomColor	string	Color of hexagon top and bottom sides	any
sidesColor	string	Color of hexagon sides	any
opacity	number	Opacity of hexagon sides	0.0 - 1.0
showTransition	boolean	Indicate whether height change animation should be shown (default - false)	true, false

Next iterations

• Add tooltips for each side
• Add more styling capabilities
• Add rotations and other animation effects
• Add deeper sides interactions
• Optimize CSS properties