hexagon-3d
Version:
A service for building CSS hexagons with high interactivity capabilities
253 lines (244 loc) • 8.89 kB
text/typescript
export type IHexagonProps = {
width?: number,
height?: number,
rotateZ?: number,
rotateX?: number,
growTop?: boolean,
showShadow?: boolean,
shadowColor?: string,
topBottomColor?: string,
sidesColor?: string,
opacity?: number,
showTransition?: boolean,
};
export type IHexagonChildrensProps = {
topChildren?: any,
bottomChildren?: any,
side1Children?: any,
side2Children?: any,
side3Children?: any,
side4Children?: any,
side5Children?: any,
side6Children?: any,
};
const topBottomColorInit = 'linear-gradient( to top right,rgba(156,204,101 ,1) 0%, rgba(38,198,218 ,1) 50%)';
const sidesColorInit = 'linear-gradient( to top right, rgba(63,81,181,1) 0%, rgba(3,155,229 ,1) 40%)';
const shadowColorInit = '1px 1px 30px rgb(2 119 189)';
const sidesColorAlternativeInit = 'linear-gradient(to top, rgba(255,81,50,1) 0%,rgba(255,246,0,1) 100%)';
const sidesShadowAlternativeInit = '0px 10px 40px 5px #c600ff';
const hexagon3D = ({
width = 70,
height = 50,
rotateZ = 30,
rotateX = 50,
showShadow = false,
shadowColor = shadowColorInit,
growTop = false,
topBottomColor = topBottomColorInit,
sidesColor = sidesColorInit,
opacity = 0.8,
showTransition = false,
}: IHexagonProps) => {
const height2D = width * 1.1547;
const sideLength = height2D / 2;
const smallHeight = width;
const hexagonStyleCommon = {
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
position: 'relative',
width: width + 'px',
height: height2D + 'px',
cursor: 'pointer',
clipPath: 'polygon(0% 25%, 0% 75%, 50% 100%, 100% 75%, 100% 25%, 50% 0%)',
background: topBottomColor,
overflow: 'hidden',
};
const sideStyleCommon = {
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
position: 'absolute',
width: sideLength + 'px',
height: height + 'px',
cursor: 'pointer',
opacity: opacity,
boxSizing: 'border-box',
background: sidesColor,
boxShadow: showShadow ? shadowColor : 'unset',
transition: showTransition ? 'height 0.5s ease-out' : 'unset',
overflow: 'hidden',
};
return !growTop ? {
container: {
style: {
position: 'relative',
transformStyle: 'preserve-3d',
transform: `rotateX(${rotateX}deg) rotateZ(${rotateZ}deg)`,
width: 'fit-content',
},
top: {
id: 'top',
style: {
...hexagonStyleCommon,
zIndex: 2
}
},
side1: {
id: 'side1',
style: {
...sideStyleCommon,
left: smallHeight / 2 + 'px',
transformOrigin: 'top left',
transform: 'rotateZ(-30deg) rotateX(-90deg)',
}
},
side2: {
id: 'side2',
style: {
...sideStyleCommon,
left: (smallHeight / 2 - sideLength) + 'px',
transformOrigin: 'top right',
transform: 'rotateZ(30deg) rotateX(-90deg)',
}
},
side3: {
id: 'side3',
style: {
...sideStyleCommon,
left: -sideLength + 'px',
top: (height2D - sideLength) / 2 + sideLength + 'px',
transformOrigin: 'top right',
transform: 'rotateZ(90deg) rotateX(-90deg)'
}
},
side4: {
id: 'side4',
style: {
...sideStyleCommon,
left: -sideLength + 'px',
top: (height2D - sideLength) / 2 + 'px',
transformOrigin: 'top right',
transform: 'rotateZ(150deg) rotateX(-90deg)'
}
},
side5: {
id: 'side5',
style: {
...sideStyleCommon,
left: smallHeight + 'px',
top: (height2D - sideLength) / 2 + 'px',
transformOrigin: 'top left',
transform: 'rotateZ(-150deg) rotateX(-90deg)'
}
},
side6: {
id: 'side6',
style: {
...sideStyleCommon,
left: smallHeight + 'px',
top: (height2D - sideLength) / 2 + sideLength + 'px',
transformOrigin: 'top left',
transform: 'rotateZ(-90deg) rotateX(-90deg)'
}
},
bottom: {
id: 'bottom',
style: {
...hexagonStyleCommon,
marginTop: -height2D + 'px',
zIndex: 1,
transform: `translateZ(${-height}px)`,
transition: 'transform 0.5s ease-out',
}
}
}
} : {
container: {
style: {
position: 'relative',
transformStyle: 'preserve-3d',
transform: `rotateX(${rotateX}deg) rotateZ(${rotateZ}deg)`,
width: 'fit-content',
},
top: {
id: 'top',
style: {
...hexagonStyleCommon,
//marginBottom: height2D + 'px',
zIndex: 2,
transform: `translateZ(${height}px)`,
transition: 'transform 0.5s ease-out',
}
},
side1: {
id: 'side1',
style: {
...sideStyleCommon,
left: smallHeight / 2 + 'px',
top: (height2D - smallHeight) + 'px',
transformOrigin: 'bottom left',
transform: `translateY(${-height + smallHeight}px) rotateZ(-30deg) rotateX(270deg)`,
}
},
side2: {
id: 'side2',
style: {
...sideStyleCommon,
top: (height2D - sideLength) / 2 + sideLength - smallHeight + 'px',
transformOrigin: 'bottom left',
transform: `translateY(${-height + smallHeight}px) rotateZ(30deg) rotateX(-90deg)`,
}
},
side3: {
id: 'side3',
style: {
...sideStyleCommon,
left: -sideLength + 'px',
top: (height2D - sideLength) / 2 + sideLength - smallHeight + 'px',
transformOrigin: 'bottom right',
transform: ` translateY(${-height + smallHeight}px) rotateZ(90deg) rotateX(-90deg)`
}
},
side4: {
id: 'side4',
style: {
...sideStyleCommon,
left: -sideLength + 'px',
top: (height2D - sideLength) / 2 - smallHeight + 'px',
transformOrigin: 'bottom right',
transform: `translateY(${-height + smallHeight}px) rotateZ(150deg) rotateX(-90deg)`
}
},
side5: {
id: 'side5',
style: {
...sideStyleCommon,
left: smallHeight + 'px',
top: (height2D - sideLength) / 2 - smallHeight + 'px',
transformOrigin: 'bottom left',
transform: `translateY(${-height + smallHeight}px) rotateZ(-150deg) rotateX(-90deg)`
}
},
side6: {
id: 'side6',
style: {
...sideStyleCommon,
left: smallHeight + 'px',
top: (height2D - sideLength) / 2 - smallHeight + sideLength + 'px',
transformOrigin: 'bottom left',
transform: `translateY(${-height + smallHeight}px) rotateZ(-90deg) rotateX(-90deg)`
}
},
bottom: {
id: 'bottom',
style: {
...hexagonStyleCommon,
marginTop: - height2D + 'px',
zIndex: 1,
}
}
}
}
};
export default hexagon3D;