CSS3 Cube (images)

Content on sides of a cube, using only CSS3.

by Just a Student

HTML

<div class="wrap">
  <div class="cube">
    <div class="side front">
      front
    </div>
    <div class="side right">
      right
    </div>
    <div class="side back">
      back
    </div>
    <div class="side left">
      left
    </div>
    <div class="side top">
      top
    </div>
    <div class="side bottom">
      bottom
    </div>
  </div>
</div>

SCSS

$size: 400px;
$half: $size / 2;

html {
  height: 100%;
  margin: 0;
}

body {
  min-height: 100%;
  margin: 0;
}

.wrap {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  perspective: $size * 2;
}

.cube {
  position: relative;
  width: $size;
  height: $size;
  transform: translateZ(0px);
  transform-style: preserve-3d;
  transition: transform 2s;
  
  .side {
    position: absolute;
    top: 0;
    left: 0;
    width: $size;
    height: $size;
    backface-visibility: hidden;
    background-color: #fff;
    border: 1px solid #444;
    font-size: 0;
    
    &.front  {
      background-image: url('https://placehold.it/400/444/ddd');
      transform: translateZ(0); }
    &.right  {
      background-image: url('https://placehold.it/400/00a2de/ddd');
      transform: translateZ(-$half) translateX($half) rotate3d(0, 1, 0, 90deg); }
    &.back   {
      background-image: url('https://placehold.it/400/00ac82/ddd');
      transform: translateZ(-$size) rotate3d(0, 1, 0, 180deg); }
    &.left   {
      background-image: url('https://placehold.it/400/ff9a00/ddd');
      transform: translateZ(-$half) translateX(-$half) rotate3d(0, 1, 0, -90deg); }
    &.top    {
      background-image: url('https://placehold.it/400/ffdd00/444');
      transform: translateZ(-$half) translateY(-$half) rotate3d(1, 0, 0, 90deg); }
    &.bottom {
      background-image: url('https://placehold.it/400/ad20ad/ddd');
      transform: translateZ(-$half) translateY($half) rotate3d(1, 0, 0, -90deg); }
  }
  
  &.right  { transform: translateZ(-$half) translateX(-$half) rotate3d(0, 1, 0, -90deg); }
  &.back   { transform: translateZ(-$size) rotate3d(0, 1, 0, 180deg); }
  &.left   { transform: translateZ(-$half) translateX($half) rotate3d(0, 1, 0, 90deg); }
  &.top    { transform: translateZ(-$half) translateY($half) rotate3d(1, 0, 0, -90deg); }
  &.bottom { transform: translateZ(-$half) translateY(-$half) rotate3d(1, 0, 0,...

JavaScript

var sides = ['front', 'right', 'back', 'left', 'top', 'bottom'],
		cube = document.querySelector('.cube');

setInterval(function() {
	var side = sides[Math.floor(Math.random() * sides.length)];
  cube.className = 'cube ' + side;
}, 5000);