Free 3D Scene
3D Metallic Pentagonal Polyhedron
A rotating 3D geometric polyhedral crystal with metallic amber and crimson facets and ambient specular highlights.
Colours in this gradient
#020617#f59e0b#e11d48#ffffff
background: ;The code
Plain HTML and CSS with no dependencies. Copy a single file, or choose "Full file" for a complete page you can save as index.html and open in a browser.
<div class="dodec-stage">
<div class="dodec-crystal">
<div class="dc-face df-1"></div>
<div class="dc-face df-2"></div>
<div class="dc-face df-3"></div>
<div class="dc-face df-4"></div>
<div class="dc-face df-5"></div>
</div>
</div>The AI prompt
Paste this into an AI coding tool to generate the same 3d scene, then ask it to adapt the colours, text or framework to your project.
Create a rotating 3D metallic pentagonal polyhedron in pure HTML and CSS. Requirements: - 5-sided pentagonal CSS clip-path facets: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%). - Rotated around Y-axis in 72-degree increments (360 / 5). - Amber to crimson translucent gradients with glowing borders. - Multi-axis tumble animation. - Zero JavaScript. Return one HTML file with a <style> block.
How to build it, step by step
- 1
Use clip-path: polygon() to generate 5-sided regular pentagons.
- 2
Arrange faces at 72deg increments around the Y-axis inside preserve-3d container.
- 3
Animate multi-axis continuous tumble keyframes.
Customisation tips
- Using 72-degree angles matches pentagonal golden ratio geometry.