#root
View Compiled
$cubesize: 300px;

body {
  background: #222;
  overflow: hidden;
  margin: 0;
}

#root {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  -webkit-filter: blur(1px);
  filter: blur(1px);
}

.container {
  position: relative;
  width: $cubesize;
  height: $cubesize;
  perspective: 1000px;
  animation: rotateScene 10s linear infinite;
}

.cube {
  height: 100%;
  width: 100%;
  position: absolute;
  transform-style: preserve-3d;
  transition: transform 1000ms ease;
  animation: animStart 950ms ease 1;
  figure {
    position: absolute;
    margin: 0;
    height: 100%;
    width: 100%;
    display: block;
    opacity: 0.65;
    &:nth-of-type(1) {
      background: #DB5461;
      transform: translateZ($cubesize/2);
    }
    &:nth-of-type(2) {
      background: #FFD9CE;
      transform: rotateX(180deg) translateZ($cubesize/2);
    }
    &:nth-of-type(3) {
      background: #593C8F;
      transform: rotateY(-90deg) translateZ($cubesize/2);
    }
    &:nth-of-type(4) {
      background: #593C8F;
      transform: rotateY(90deg) translateZ($cubesize/2);
    }
    &:nth-of-type(5) {
      background: #8EF9F3;
      transform: rotateX(90deg) translateZ($cubesize/2);
    }
    &:nth-of-type(6) {
      background: #8EF9F3;
      transform: rotateX(-90deg) translateZ($cubesize/2);
    }
  }
}

@keyframes rotateScene {
  to { transform: rotateZ(360deg); }
}

@keyframes animStart {
  from { transform: translateZ(1000px) rotateX(-30deg) rotateY(30deg) rotateZ(0); }
  to { transform: translateZ(-500px) rotateX(-30deg) rotateY(30deg) rotateZ(360deg); }
}
var rn = (min, max) => Math.floor(Math.random()*(max-min+1)+min) // inclusive by +1

class Root extends React.Component {
  render() {
    return (
      <div className="container">
        {Array(6).fill().map((x,i) => <Cube to={i*50} key={i} />)}
      </div>
    )
  }
}

class Cube extends React.Component {
  constructor(props) {
    super(props)
    this.state = { a:[-30,30,0,0,0,-500], to:props.to }
  }

  componentDidMount() {
    var d = 180;
    setTimeout(() => {
      setInterval(() => {
        var hw = window.innerWidth/2, hh = window.innerHeight/2
        this.setState({a:[rn(-d,d),rn(-d,d),rn(-d,d),rn(-hw,hw),rn(-hh,hh),rn(-3000,-500)]})
      }, 1000)
    }, this.state.to)
  }

  render() {
    var a = this.state.a,
        cubeStyle = { transform: `translate3d(${a[3]}px, ${a[4]}px, ${a[5]}px) rotateX(${a[0]}deg) rotateY(${a[1]}deg) rotateZ(${a[2]}deg)` }
    return (
      <div className="cube" style={cubeStyle}>
        {Array(6).fill().map(() => <figure />)}
      </div>
    )
  }
}

ReactDOM.render(<Root />, document.getElementById('root'))
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.min.js