3D Würfel mit CSS

  • 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 Ich heisse Oli und komme aus dem wuseligen Berlin. Meine Leidenschaft für Webseiten hält seit mehr 10 Jahren an. Dabei ist es egal ob ich kleinere oder größere Projekte umsetze - ich hänge mich in jedes Projekt mit voller Leidenschaft rein und versuche mich dabei immer wieder neu zu entdecken und neue Ideen umzusetzen.

Hinterlasse ein Kommentar

Schreibe einen Kommentar

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