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;

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

oliver

Hinterlasse doch 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.

Hinterlasse ein Kommentar zum Beitrag "3D Würfel mit CSS erstellen – so geht’s"

Deine E-Mail-Adresse wird nicht veröffentlicht.

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