tarikurrahmanbd/3d-transform-calculations

This project is an interactive 3D periodic table you view in a web browser. It shows the chemical elements laid out in space and lets you switch between four arrangements: a flat table, a sphere, a helix, and a grid, with the elements smoothly moving from one layout to the next. What makes this different from a typical 3D web project is that it does not use WebGL or a 3D rendering engine at all. Instead, the math used to calculate where each element sits in 3D space, normally handled by a library called three.js, has been rewritten here to work with plain CSS 3D transforms. In other words, the flat HTML elements are positioned using regular CSS properties, but the numbers behind those positions come from real 3D vector and matrix calculations. This keeps the page lightweight, since it avoids loading a full graphics engine, while still producing a convincing 3D effect. The animation between layouts is handled by Anime.js, a JavaScript library built for smooth, custom motion and easing curves. The combination of CSS 3D transforms for rendering and Anime.js for movement is meant to give good performance because it relies on the browser's own hardware-accelerated transforms rather than constant JavaScript-driven redraws. Getting it running is simple: clone the repository and open the index.html file directly in a browser, or serve it locally with a tool such as VS Code's Live Server, or Node's npx serve command, if you want smoother asset loading. Once it is open, clicking the table, sphere, helix, and grid buttons at the top switches between the layouts. The project has three files: an HTML file for the page structure and buttons, a CSS file for the layout and 3D perspective setup, and a JavaScript file containing the element data, the Anime.js animation configuration, and the ported 3D math.