CUBE.

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

<!DOCTYPE html>
<html >
<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/ */
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;
}
/* Downloaded from https://www.codeseek.co/ */

This awesome code ( CUBE. ) is write by Symsym, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © Symsym