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

HTML
CSS


	Front
	Back
	Right
	Left
	Top
	Bottom

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.


	Front
	Back
	Right
	Left
	Top
	Bottom

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.

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

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

Keine Produkte gefunden.

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.

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);
}

Letzte Aktualisierung am 2.05.2024 / Affiliate Links / Bilder von der Amazon Product Advertising API

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.