3D Würfel mit CSS erstellen – so geht’s

Oliver Götze

Verfasst am 09.10.2018

Update 28.04.2025

HTML
CSS

HTML

									<div id="cube">
	<div class="cube-face front">Front</div>
	<div class="cube-face back">Back</div>
	<div class="cube-face right">Right</div>
	<div class="cube-face left">Left</div>
	<div class="cube-face top">Top</div>
	<div class="cube-face bottom">Bottom</div>
</div>

CSS

									div#cube {
	width: 300px;
	height: 300px;	
	margin: 100px auto 0 auto;
	perspective: 5000px;
	-moz-perspective: 5000px;
	-webkit-perspective: 5000px;
	transform-style: preserve-3d;	
	-moz-transform-style: preserve-3d;	
	-webkit-transform-style: preserve-3d;
	transform: rotate3d(-4, -6, 1.65, 54deg);
	-moz-transform: rotate3d(-4, -6, 1.65, 54deg);
	-webkit-transform: rotate3d(-4, -6, 1.65, 54deg);	
	position: relative;
}
div#cube div.cube-face {
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 1;
	left: 0;
	top: 0;
	font-size: 60px;
	line-height: 300px;
	text-align: center;
	font-weight: bold;
	text-transform: uppercase;
	color: rgba(0,0,0,0.5);
	font-size: 20px;
}
div#cube div.cube-face.front {
	transform: rotateY(0deg) translateZ(150px);
	-o-transform: rotateY(0deg) translateZ(150px);
	-moz-transform: rotateY(0deg) translateZ(150px);
	-webkit-transform: rotateY(0deg) translateZ(150px);
	border: 20px solid rgba(255,255,255,0.1);
	background: rgba(238, 234, 196 , 0.5);
}
div#cube div.cube-face.back {
	transform: rotateY(180deg) translateZ(150px);
	-o-transform: rotateY(180deg) translateZ(150px);
	-moz-transform: rotateY(180deg) translateZ(150px);
	-webkit-transform: rotateY(180deg) translateZ(150px);
	border: 20px solid rgba(255,255,255,0.1);
	background: rgba(235, 211, 187 , 0.5);
}
div#cube div.cube-face.right {
	transform: rotateY(90deg) translateZ(150px);
	-o-transform: rotateY(90deg) translateZ(150px);
	-moz-transform: rotateY(90deg) translateZ(150px);
	-webkit-transform: rotateY(90deg) translateZ(150px);
	border: 20px solid rgba(255,255,255,0.1);
	background: rgba(238, 234, 196, 0.5);
}
div#cube div.cube-face.left {
	transform: rotateY(-90deg) translateZ(150px);
	-o-transform: rotateY(-90deg) translateZ(150px);
	-moz-transform: rotateY(-90deg) translateZ(150px);
	-webkit-transform: rotateY(-90deg) translateZ(150px);
	border: 20px solid rgba(255,255,255,0.1);
	background: rgba(224, 230, 216 , 0.5);
}
div#cube div.cube-face.top {
	transform: rotateX(90deg) translateZ(150px);
	-o-transform: rotateX(90deg) translateZ(150px);
	-moz-transform: rotateX(90deg) translateZ(150px);
	-webkit-transform: rotateX(90deg) translateZ(150px);
	border: 20px solid rgba(255,255,255,0.1);
	background: rgba(169, 197, 196 , 0.5);
}
div#cube div.cube-face.bottom {
	transform: rotateX(-90deg) translateZ(150px);
	-o-transform: rotateX(-90deg) translateZ(150px);
	-moz-transform: rotateX(-90deg) translateZ(150px);
	-webkit-transform: rotateX(-90deg) translateZ(150px);
	border: 20px solid rgba(255,255,255,0.1);
	background: rgba(199, 215, 205 , 0.5);
}

Front

Back

Right

Left

Top

Bottom

Würfel eignen sich hervorragend um mit 3D Transformationen zu arbeiten und zu lernen. Um einen 3D Würfel mit CSS zu erstellen benötigen wir zunächst einen Rahmen mit 6 Child-Elementen für alle Seiten des 3D Würfels.

Das Grundgerüst des 3D Würfels

Zunächst erstellen wir die Grundstruktur für unseren Würfel.

html

				<div id="cube">
	<div class="cube-face front">Front</div>
	<div class="cube-face back">Back</div>
	<div class="cube-face right">Right</div>
	<div class="cube-face left">Left</div>
	<div class="cube-face top">Top</div>
	<div class="cube-face bottom">Bottom</div>
</div>

Mittels CSS den 3D Effekt erstellen

Nun geben wir den Rahmen eine Breite und Höhe. Diese sollte identisch sein. Die 6 Seitenelemente des Würfels positionieren wir absolut. Anschließend erhält das Elternelement mit der ID Cube die transform-style. Damit lässt sich eine 3D Grafik erstellen und der Würfel anschließend auf allen 3 Achsen (X-, Y- und Z-Achse) drehen, neigen und rotieren. Ebenso können wir die Perspektive auf den Würfel angeben.

css

				transform-style: preserve-3d;	
-moz-transform-style: preserve-3d;	
-webkit-transform-style: preserve-3d;

perspective: 5000px;
-moz-perspective: 5000px;
-webkit-perspective: 5000px;

Zu guter Letzt werden alle Seiten anhand der X-, Y- oder Z-Achse ausgerichtet. Zu beachten ist, dass der Wert in translateZ die Hälfte der Breite/Höhe betragen soll. In meinem Fall ist der 3D Würfel 300px breit und hoch. Daher der Wert 150.

css

				div#cube div.cube-face.front {
	transform: rotateY(0deg) translateZ(150px);
}
div#cube div.cube-face.back {
	transform: rotateY(180deg) translateZ(150px);
}
div#cube div.cube-face.right {
	transform: rotateY(90deg) translateZ(150px);
}
div#cube div.cube-face.left {
	transform: rotateY(-90deg) translateZ(150px);
}
div#cube div.cube-face.top {
	transform: rotateX(90deg) translateZ(150px);
}
div#cube div.cube-face.bottom {
	transform: rotateX(-90deg) translateZ(150px);
}

1 Like

Hinterlasse doch ein Kommentar

Schreibe ein Kommentar zu 3D Würfel mit CSS erstellen – so geht’s

Wenn dir der Beitrag 3D Würfel mit CSS erstellen – so geht’s gefallen hat oder du Kritik bzw. Verbesserungsvorschläge hast, dann würde ich mich freuen, wenn Du ein Kommentar hinterlassen würdest.