Rotate 3D in CSS

HTML

<div class="container">
	<div class="cube-z">
		<div class="cube-y">
			<div class="cube-x">
				<div class="face-one">1</div>
        <div class="face-text"></div>
			</div>
		</div>
	</div>
</div>

CSS

.container {
  width: 400px;
  margin: 100px auto;
    perspective: 500px;
  perspective-origin: 25% 50%;
}
[class^="cube"] {
  position: relative;
  width: 200px;
  height: 200px;
  transform-style: preserve-3d;
}
[class^="face-"] {
  position: absolute;
  width: 200px;
  height: 200px;
  padding: 20px;
  color: rgba(0,0,0,0.75);
  border: 1px solid;

  font-size: 160px;
  font-family:Avenir;
  line-height: 1;
  text-align: center;
}

.face-text {
  transform: translateZ(100px);
  background-color: blue;
  height:20px;
  width:100%;
  bottom:0px;
}

.face-one {
  transform: translateZ(100px);
  background-color: hsla(329, 58%, 52%, 0.8);  
}
.face-two {
  transform: rotateX(90deg) translateZ(100px);
  background-color: hsla(0, 0%, 13%, 0.8);
}
.face-three {
  transform: rotateY(90deg) translateZ(100px);
  background-color: hsla(54, 70%, 68%, 0.8);
}
.face-four {
  transform: rotateY(-90deg) translateZ(100px);
  background-color: hsla(190, 81%, 67%, 0.8);
}
.face-five {
  transform: rotateX(-90deg) translateZ(100px) rotate(180deg);
  background-color: hsla(261, 100%, 75%, 1.0);
}
.face-six {
  transform: rotateY(180deg) translateZ(100px);
  background-color: hsla(84, 76%, 53%, 0.8);
}
.cube-z { transform: rotateZ(0deg); }
.cube-y { transform: rotateY(0deg); }
.cube-x { transform: rotateX(0deg); }

.cube-z { animation: spin 4s infinite ease-in-out; }

@keyframes spin {
  0% { transform:rotateY(-20deg) }
  50% { transform:rotateY(20deg) }
  100% { transform:rotateY(-20deg) }
}