3d cube

In this example below you will see how to do a 3d cube with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by fainz777, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright fainz777 ©
  • HTML
  • CSS
  • JavaScript
    <!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Cube</title>
</head>
<body>
	<div class="wrapper">
		<div id="cube">
			<div class="side side_1"></div>
			<div class="side side_2"></div>
			<div class="side side_3"></div>
			<div class="side side_4"></div>
			<div class="side side_5"></div>
			<div class="side side_6"></div>
		</div>
	</div>
</body>
</html>

/*Downloaded from https://www.codeseek.co/fainz777/3d-cube-gyIbd */
    		.wrapper {
			-webkit-perspective: 2000px;
		}

		#cube {
			position: relative;
			width: 450px;
			margin: 0 auto;
			-webkit-transform: 
        rotateX(70deg) 
        rotateZ(-35deg)
        translateX(-300px)
        translateY(300px);
      -webkit-transform-style: preserve-3d;
      perspective-origin: 300px;
  /*backface-visibility: visible | hidden (init: visible)*/

		}

		.side {
			position: absolute;
			width: 150px;
			height: 150px;
      box-shadow: inset 0 0 0 1px  rgba(0, 0, 0, 0.5);
		}

		.side_1 {
			top: 0;
			left:150px;
			background: rgba(34, 12, 255, 0.5);
      -webkit-transform:
        rotateX(90deg) 
        translateY(75px)
        translateZ(-75px);
		}

		.side_2 {
			top: 150px;
			left:0;
			background: rgba(130, 150, 80, 0.5);
      -webkit-transform:
        rotateY(90deg) 
        translateX(-75px)
        translateZ(75px);
		}

		.side_3 {
			top: 150px;
			left:150px;
			background: rgba(40, 120, 10, 0.5);
		}

		.side_4 {
			top: 150px;
			left:300px;
			background: rgba(230, 143, 80, 0.5);
      -webkit-transform: 
        rotateY(90deg)  
        translateX(-75px)
        translateZ(-75px);
		}

		.side_5 {
			top: 300px;
			left:150px;
			background: rgba(120, 120, 120, 0.5);
      -webkit-transform:
        rotateX(90deg) 
        translateY(75px)
        translateZ(75px);
		}

		.side_6 {
			top: 450px;
			left:150px;
			background: rgba(230, 50, 50, 0.5);
      -webkit-transform:
        translateY(-300px)
        translateZ(150px);
		}


/*Downloaded from https://www.codeseek.co/fainz777/3d-cube-gyIbd */
    

Comments