CUBE.

In this example below you will see how to do a CUBE. with some HTML / CSS and Javascript

Here's a spinning cube in CSS only and HTML, with lots of transforms property.

Thumbnail
This awesome code was written by Symsym, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Symsym ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>CUBE.</title>
  <link rel="stylesheet" href="//brick.a.ssl.fastly.net/Lato:300">
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <table id="page-table">
  <tr>
    <td id="page-td"> 
      <div class="container">
        <h1>CUBE.</h1>
        <div id="cube" class="spinning">
          <div id="front"></div>
          <div id="back"></div>
          <div id="right"></div>
          <div id="left"></div>
          <div id="up"></div>
          <div id="bottom"></div>
        </div>
       </div>
    </td>
  </tr>
</table>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/Symsym/cube-AbCeq */
body {
    background: #222;
    font-family: Arial;
}
#page-table {
    height: 100%;
    width: 100%;
    border-collapse: collapse;
    text-align: center;
}
#page-td {
    height: 100%;
    padding: 0;
    vertical-align: middle;
}
@-webkit-keyframes rotateCube {
	0% { 
		-webkit-transform: translateZ( -100px ) rotateX(   0deg ) rotateY(   0deg );
	}
	100% {
		-webkit-transform: translateZ( -100px ) rotateX( 360deg ) rotateY( 360deg );
	}
}
.container {
    -webkit-perspective: 600;
    margin-top: 100px;
}
#cube {
    width: 200px;
    height: 200px;
    margin: 20px auto;
    -webkit-transform-style: preserve-3d;
    -webkit-transition: -webkit-transform 2s;
    -webkit-transform: translateZ(-100px) rotateX( -220deg ) rotateY( 45deg );
}
#cube.spinning {
    -webkit-animation: rotateCube 7s infinite linear;
}
#cube div {
    position: absolute;
    -webkit-backface-visibility: visible;
    overflow: hidden;
    width: 200px;
    height: 200px;
    background: transparent;
    border: 1px solid rgb(65, 65, 65);
}
#front {
    -webkit-transform: translateZ( 100px );
}
#back {
    -webkit-transform: translateZ( -100px );
}
#right {
    -webkit-transform: rotateY( -90deg ) translateZ( 100px );
}
#left {
    -webkit-transform: rotateY( 90deg ) translateZ( 100px );
}
#up {
    -webkit-transform: rotateX(90deg) translateZ( 100px );
}
#bottom {
    -webkit-transform: rotateX(-90deg) translateZ( 100px );
}
h1 {
  color: rgba(65, 65, 65, .6);
  font-weight: normal;
  font-family: Lato;
  font-weight: 300; 
  font-size: 50px;
  position: relative;
  top: 170px;
  text-align: center;
  z-index: 100;
}

Comments