Spiel-Würfel in HTML und CSS

[Matthias Scharwies]

Servus!

Moin,

wollte nur sagen, dass der Würfel eine mega geile Idee ist 😀.
Einen Würfel mit "echter" Würfelanimation gibt es nicht zufällig auch mit puren html/css?

Hier ist nochmal der Link:

• CSS/Tutorials/Transform/Drehen,_Kreisen_und_Pendeln#CSS-W.C3.BCrfel.

Ich hatte das Beispiel 2015 mit lauter div-Elementen gebaut. Ich finde es mit custom elements übersichtlicher - man kann ja aber wieder divs verwenden.

Leider zeigt der Quelltext nicht das vollständige css was man bräuchte um es selbst nach zu bauen.

Das ist ja nur der Ausschnitt im Artikel - im Frickl steht das gesamte HTML und CSS.

Hole ich mir jedoch das css aus dem Beispiel funktioniert der Würfel auch bei mir.

Ebent. Ich hatte aber erst nach meinem Beispiel den dort verlinkten Artikel von Ana Tudor gelesen: Simplifying CSS Cubes with Custom Properties

Abgesehen davon, dass sie HAML und SCSS verwendet, hier einige Unterschiede, die ich noch besser als meinen Versuch finde:

• Alle Seiten heißen gleich (cube-face)
• Die Seiten werden dann über cube-face:nth-child()angesprochen.
• transform-origin ist bei allen Seiten gleich → einfacheres CSS

Das werde ich im Beispiel noch verbessern.

.cube__face {
  --i: 0;
  transform: rotate3d(var(--i), calc(1 - var(--i)), 0, calc(var(--m, 0)*90deg)) 
    translateZ(4em);
}

.cube__face:nth-child(n + 5) { --i: 1 }

.cube__face:nth-child(2) { --m: 1 }
.cube__face:nth-child(3) { --m: 2 }
.cube__face:nth-child(4) { --m: 3 }
.cube__face:nth-child(5) { --m: 1 }
.cube__face:nth-child(6) { --m: -1 }

Das ist mir fast schon zu kryptisch, vor allem, da die Rotation bei einem Würfel immer gleich bleibt.

Wo die custom properties genial sind, ist --size: Mit nur einer Festlegung kann man die Größe des Würfels verändern!

ToDo

Diesen Würfel mit SVGs für die Augen erweitern. Die background-imagessind zu kompliziert und vor allem nicht mit CSS zentral stylbar. Das ganze mit Shadow DOM zu kapseln, damit man nicht 7 HTML-Elemente, einen CSS-Block und evlt. JS hat, wäre optimal.

Jetzt noch …

• für jede Zahl die 3D-Transform festlegen.
• ein Script schreiben, das den Würfel von oben links fallen lässt, der Würfel sich n-mal dreht und dann auf der vom Script ermittelten Zahl „liegenbleibt“.
• ein Klackern als mp3

und dann ein Spielfeld und eine Spiele-Logik!

Herzliche Grüße

Matthias Scharwies