WEBLEB
Startseite
Editor
Anmelden
Pro
Deutsch
English
Français
Español
Português
Deutsch
Italiano
हिंदी
WÜRFEL
652
THEOPHANE
Im Editor öffnen
Veröffentlichen Sie Ihren Code
Empfohlen
23 October 2024
Der Würfel
22 September 2025
3D-Würfelspiel HTML mit Statistiken und Anpassung
HTML
Copy
representation
CSS
Copy
*{ margin: 0; padding: 0; box-sizing: border-box; } body{ display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #050505; } .cube{ position: relative; width: 300px; height:300px; transform-style: preserve-3d; animation: animate 4s linear infinite; } @keyframes animate { 0% { transform: rotateX(-30deg)rotateY(0deg); } 100% { transform: rotateX(-30deg)rotateY(360deg); } } .cube div{ top: 0; left: 0; width: 100%; height: 100%; transform-style: preserve-3d; } .cube div span{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background:linear-gradient(#151515,#00ec00); transform: rotateY(calc(90deg *var(--i)))translateZ(150px); } .top{ position: absolute; top: 0; left: 0; width: 300px; height: 300px; background: #222; transform: rotateX(90deg) translateZ(150px); } .top::before{ content: ''; position: absolute; top: 0; left: 0; width: 300px; height: 300px; background: #0f0; transform: translateZ(-380px); filter: blur(20px); box-shadow: 0 0 120px rgba(0,255,0,0.2), 0 0 200px rgba(0,255,0,0.4), 0 0 300px rgba(0,255,0,0.6), 0 0 400px rgba(0,255,0,0.8), 0 0 500px rgba(0,255,0,1); }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */