.scene {
	width: 64px;
	height: 64px;
	perspective: 400px;
	scale: 0.7;
}

.cube {
	width: 64px;
	height: 64px;
	position: relative;
	transform-style: preserve-3d;
	transform: translateZ(-100px);
	transition: transform 1s;
	animation: 7s linear .1s cubeidle;
	animation-iteration-count: infinite;
}
.cube:hover{
	animation: cubetouch 1s;
	animation-iteration-count: initial;
	animation-fill-mode: forwards;
}

.cube.show-front{ transform: translateZ(-32px) rotateY( 0deg); }
.cube.show-right{ transform: translateZ(-32px) rotateY( -90deg); }
.cube.show-back { transform: translateZ(-32px) rotateY(-180deg); }
.cube.show-left { transform: translateZ(-32px) rotateY(90deg); }
.cube.show-top{ transform: translateZ(-32px) rotateX( -90deg); }
.cube.show-bottom { transform: translateZ(-32px) rotateX(90deg); }

.cube__face {
position: absolute;
width: 64px;
height: 64px;
background-position: center;
image-rendering: crisp-edges;
image-rendering: pixelated;
line-height: 32px;
font-size: 40px;
font-weight: bold;
color: white;
text-align: center;
}

.cube__face--front{ background: hsla(0, 100%, 50%, 0.7); }
.cube__face--right{ background: hsla( 60, 100%, 50%, 0.7); }
.cube__face--back { background: hsla(120, 100%, 50%, 0.7); }
.cube__face--left { background: hsla(180, 100%, 50%, 0.7); }
.cube__face--top{ background: hsla(240, 100%, 50%, 0.7); }
.cube__face--bottom { background: hsla(300, 100%, 50%, 0.7); }

.cube__face--front{ transform: rotateY(0deg) translateZ(32px); }
.cube__face--right{ transform: rotateY( 90deg) translateZ(32px); }
.cube__face--back { transform: rotateY(180deg) translateZ(32px); }
.cube__face--left { transform: rotateY(-90deg) translateZ(32px); }
.cube__face--top{ transform: rotateX( 90deg) translateZ(32px); }
.cube__face--bottom { transform: rotateX(-90deg) translateZ(32px); }

@keyframes cubeidle {
  0%   {transform: RotateY(0deg)}
  25%   {transform: RotateY(90deg)}
  50%   {transform: RotateY(180deg)}
  75%   {transform: RotateY(270deg)}
  100% {transform: RotateY(360deg)}
}
@keyframes cubetouch {
  0%   {transform: unset}
  100%   {transform: RotateX(-20deg)}
}