Spiel-Würfel in HTML und CSS

[Matthias Scharwies]

Servus!

@@Matthias Scharwies

• Alle Seiten heißen gleich (cube-face)

Warum sollen die Seiten denn überhaupt irgendwie heißen?

Der Würfel ist ja nur Visualiserung der Zufallszahl (von Dekoration würde ich hier nicht sprechen wollen), also brauchen wir ein cube-Element, meinetwegen auch ein inhaltsleeres div mit entsprechender Klasse.

Idealiter würde man dieses cube-Element und 6 Pseudoelemente verwenden; wie kann ich das realisieren? Deshalb @Rolf B s Idee mit dem Shadow DOM.

• Die Seiten werden dann über cube-face:nth-child()angesprochen.

Man kann sie auch über .cube > :nth-child() ansprechen.^[1]

Wahnsinn, dass ich das noch erleben darf, dass Gunnar Bittersmann mal den Einsatz eines div-Elements empfiehlt!

Für den Spielwürfel, werde ich die sechs Seiten aus svgs bilden, die ja mit 3d transformiert werden können. So kriege ich Farben wieder ins CSS (leider eben nicht da, wo sich das cube-Element befindet.

---

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

Sind sie dafür genial? Nötig sind sie nicht. Man kann auch einen Einheitswürfel erstellen und diesen als Ganzes skalieren.

Ja, z.B mit einem --scale-Faktor - mal schauen!

Herzliche Grüße

Matthias Scharwies

---

1. bezogen auf Anas Artikel; mit custom element dann eben x-cube > :nth-child() und die Seitenflächen können div sein statt weiterer custom elements im shadow DOM. ↩︎