style.css

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  width: 100%;
  font-family: sans-serif;
}

body > .content {
    margin: 2em;
    max-width: 480px;
}

li {
    margin-bottom: 0.5em;
}

#cube {
  top: 50%;
  left: 50%;
  margin-top: -180px;
  margin-left: -180px;
  cursor: pointer;
  -webkit-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform: perspective(1600px) translateZ(0);
  -ms-transform: perspective(1600px) translateZ(0);
  transform: perspective(1600px) translateZ(0);
}

#cube,
#cube > .face {
  position: absolute;
  width: 360px;
  height: 360px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

#cube > .face {
  text-align: center;
  font-size: 120px;
  font-weight: bold;
  padding: 120px 12px 0;
  -webkit-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
}

#cube > .front.face {
  -webkit-transform: translateZ(180px);
  -ms-transform: translateZ(180px);
  transform: translateZ(180px);
  background-color: #ddd;
}

#cube > .back.face {
  -webkit-transform: rotateZ(-90deg) rotateY(180deg) translateZ(180px);
  -ms-transform: rotateZ(-90deg) rotateY(180deg) translateZ(180px);
  transform: rotateZ(-90deg) rotateY(180deg) translateZ(180px);
  background-color: #ccc;
  color: #f60;
  font-size: 160px;
  padding-top: 100px;
  text-align: left;
}

#cube > .top.face {
  -webkit-transform: rotateY(90deg) rotateX(90deg) translateZ(180px);
  -ms-transform: rotateY(90deg) rotateX(90deg) translateZ(180px);
  transform: rotateY(90deg) rotateX(90deg) translateZ(180px);
  background-color: #bbb;
  color: #f60;
  font-size: 160px;
  padding-top: 100px;
  text-align: right;
}

#cube > .bottom.face {
  -webkit-transform: rotateX(-90deg) translateZ(180px);
  -ms-transform: rotateX(-90deg) translateZ(180px);
  transform: rotateX(-90deg) translateZ(180px);
  background-color: #daa;
}

#cube > .right.face {
  -webkit-transform: rotateX(-90deg) rotateY(90deg) translateZ(180px);
  -ms-transform: rotateX(-90deg) rotateY(90deg) translateZ(180px);
  transform: rotateX(-90deg) rotateY(90deg) translateZ(180px);
  background-color: #ada;
}

#cube > .left.face {
  -webkit-transform: rotateX(-90deg) rotateY(-90deg) translateZ(180px);
  -ms-transform: rotateX(-90deg) rotateY(-90deg) translateZ(180px);
  transform: rotateX(-90deg) rotateY(-90deg) translateZ(180px);
  background-color: #aad;
}

#cube > .face > img {
  width: 100%;
  height: auto;
}