Free 3D Scene
3D Origami Geometric Crystal
A rotating 3D geometric polyhedral crystal with luminous translucent faces, vertex nodes, and prismatic reflections.
Colours in this gradient
#020617#06b6d4#a855f7#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="crys-stage">
<div class="crys-poly">
<div class="crys-face cf-1"></div>
<div class="crys-face cf-2"></div>
<div class="crys-face cf-3"></div>
<div class="crys-face cf-4"></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 origami geometric crystal in pure HTML and CSS. Requirements: - Triangular CSS border faces assembled in 3D space with preserve-3d. - Distinct vibrant translucent faces (cyan, purple, pink, blue). - Multi-axis 3D tumble animation. - Zero JavaScript. Return one HTML file with a <style> block.
How to build it, step by step
- 1
Use transparent borders to generate equilateral triangular faces.
- 2
Position faces at 120-degree intervals around Y axis with rotateX inward incline.
- 3
Animate continuous multi-axis rotation.
Customisation tips
- Translucent borders with drop-shadow filters replicate faceted mineral glass.