Edit in JSFiddle

Result
CSS
HTML

#wrap {
  width: 200px;
  height: 200px;
  position: relative;
  margin: 40px auto;
  border: 1px solid #CCC;
  perspective: 400px;
  perspective-origin: 50% 50%;
}

#cube {
  width: 100%;
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
  transform: translateZ( -100px);
}

#cube>div {
  display: block;
  position: absolute;
  width: 196px;
  height: 196px;
  border: 2px solid black;
  line-height: 196px;
  font-size: 120px;
  font-weight: bold;
  color: white;
  text-align: center;
}

#cube .front {
  background: hsla( 0, 100%, 50%, 0.7);
  transform: translateZ( 100px);
}

#cube .back {
  background: hsla( 60, 100%, 50%, 0.7);
  transform: rotateX( -180deg) translateZ( 100px)
}

#cube .right {
  background: hsla( 120, 100%, 50%, 0.7);
  transform: rotateY( 90deg) translateZ( 100px);
}

#cube .left {
  background: hsla( 180, 100%, 50%, 0.7);
  transform: rotateY( -90deg) translateZ( 100px);
}

#cube .top {
  background: hsla( 240, 100%, 50%, 0.7);
  transform: rotateX( 90deg) translateZ( 100px);
}

#cube .bottom {
  background: hsla( 300, 100%, 50%, 0.7);
  transform: rotateX( -90deg) translateZ( 100px);
}

<!DOCTYPE html>
<html lang="ko">
  <head></head>
  <body>
    <div id="wrap">
      <div id="cube" class="spinning">
        <div class="front">1</div>
        <div class="back">2</div>
        <div class="right">3</div>
        <div class="left">4</div>
        <div class="top">5</div>
        <div class="bottom">6</div>
      </div>
    </div>
    <div style="width:330px; text-align:center; margin:0 auto;">
      <div>
        <p>perspective 변경 </p>
        <input type="range" id="p_r" value="400" min="1" max="1000" style="width:200px">
        <input type="number" id="p_v" value="400" min="1" max="1000">px
      </div>
      <div>
        <p>perspective-origin </p>
        <div>
          X <input type="range" id="x_r" value="50" min="-100" max="200" style="width:200px">
          <input type="number" id="x_v" value="50" min="-100" max="200">%
        </div>
        <div>
          Y <input type="range" id="y_r" value="50" min="-100" max="200" style="width:200px">
          <input type="number" id="y_v" value="50" min="-100" max="200">%
        </div>
      </div>
    </div>
  </body>
</html>