andrea della valle's profile

CSS Interactive 3D Polygons

What is it?
A micro 3D engine made with JS and CSS, to create a scalable and parametric 3D polygon stack and interactively show the software architecture of the open-source Fury Kubernetes Distribution by fetching its Github data at build time.

This means that every time the target branch publish a release the scripts checks for the new version and redraws the polygons according to the new data, changing number of sides, titles and info.

This allows a reasonable scaling of the content while the stacked layout remains the same, without the need of manual updates to the page layout or styles.
ACCESSIBILITY: every polygon side is a simple and fully accessible HTML div element, so it can be translated with every screen reader as a normal page text, this is NOT WebGL nor HTML canvas.
WIP: the CSS 3D micro engine it's still not open-source, I'm in the process of making it usable for more use cases
Interactions:
Idling animation before opening
Idling animation while open
On page integration
CSS Interactive 3D Polygons
Published:

CSS Interactive 3D Polygons

Published: