Spiel-Würfel in HTML und CSS

[Matthias Scharwies]

Guten Morgen!

Es gibt ja sogar Würfel als Unicode-Zeichen:

⚀ ⚁ ⚂ ⚃ ⚄ ⚅

Schöner wäre es natürlich mit CSS oder SVG. Vorher will ich aber das „perfekte“ HTML finden:

Im Transform-Tutorial gibt es einen CSS-Würfel:

	<div class="cube">
		<div class="vorne">vorne</div>
		<div class="hinten">hinten</div>
		<div class="oben">oben</div>
		<div class="unten">unten</div>
		<div class="links">links</div>
		<div class="rechts">rechts</div>
	</div>

Der müsste aber eigentlich div-Würfel heißen.

Was haltet ihr von custom elements?

<x-cube>
		<x-side>1</x-side>
		<x-side>2</x-side>
		<x-side>3</x-side>
		<x-side>4</x-side>
		<x-side>5</x-side>
		<x-side>6</x-side>
</x-cube>

Wenn man die einzelnen Zahlen nicht mit box-shadow umsetzen will, könnte man SVG verwenden:

<x-cube>
		<svg id="1">...</svg>
		<svg id="2">...</svg>
		<svg id="3">...</svg>
		<svg id="4">...</svg>
		<svg id="5">...</svg>
		<svg id="6">...</svg>
</x-cube>

Was ist am besten / einfachsten?

Habt ihr andere Vorschläge, wie man das umsetzen kann?

Herzliche Grüße

Matthias Scharwies