Edit on
<div id="container">
  <div id="cube">
    <div class="face front"><div class="label">I'm draggable!</div></div>
    <div class="face back"></div>
    <div class="face right"></div>
    <div class="face left"></div>
    <div class="face top"></div>
    <div class="face bottom"></div>
  </div>
  <div id="perspOrigin"><div class="originlabel">move the perspective-origin</div></div>
  <div id="perspectiveControl"></div>
  <div class="label persp-max">1000px</div>
  <div class="label persp-min">1px</div>
  <div class="label persp">Set the perspective depth</div>
</div>
#container {
  width: 600px;
  height: 300px;
  perspective: 1000px;
  border: 1px solid #222;
  position: relative;
  font-family:sans-serif;
}

#cube {
  margin:50px auto 0;
  width:200px;
  height:200px;
  position:relative;
  transform-style: preserve-3d;
}

#cube .face {
  width: 200px;
  height: 200px;
  display: block;
  position: absolute;
  top:0;
  left:0;
  border: 1px solid #444;
}

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

/* ------ */
#perspectiveControl {
  position: absolute;
  top: 30px;
  right: 12px;
  height:240px;
}

.label {
  position:absolute;
  font-size:10px;
}
.persp-max {
  top:5px;
  right:5px;
}
.persp-min {
  bottom:6px;
  right:14px;
}
.persp {
  transform:rotate(-90deg);
  position:absolute;
  top:140px;
  right:-55px;
}
.ui-widget-content{
  background:#eee;
}

#perspOrigin {
  width:20px;
  height:20px;
  margin:-111px auto 0;
  border-radius:50%;
  border:1px solid #ccc;
  background: #eee;
  cursor: move;
}
.originlabel {
  font-size:10px;
  word-wrap:none;
  position:relative;
  left:25px;
  top:-3px;
  width:100px;
}
$(document).ready(function() {
  $("#perspectiveControl").slider({
    orientation: "vertical",
    min: 1,
    max: 1000,
    value: 1000,
    slide: function(event, ui) {
      $("#container").css('perspective', ui.value);
    }
  });
  
  $("#perspOrigin").draggable({
    drag: function( event, ui ) {
      //perspective origin relative to the container
      var perspY = parseInt($(this).css('top')) + 150;
      var perspX = parseInt($(this).css('left')) + 300;
      var newOrigin = perspX + 'px ' + perspY + 'px';
      $("#container").css('perspective-origin', newOrigin);
    }
  });
  $("#cube").draggable();

  //$("#minval").val($("#slider-5").slider("value"));
});
Rerun