iPhone + Screenshot

need a fix

HTML

<form id="screenshot">
  <label>scaleX</label>
  <input type="range" name="scaleX" min="0" value="1" max="1" step=".00001">
  <label>scaleY</label>
  <input type="range" name="scaleY" min="0" value="1" max="1" step=".00001">
  <label>rotateX</label>
  <input type="range" name="rotateX" data-d="deg" min="-180" value="0" max="180" step=".00001">
  <label>rotateY</label>
  <input type="range" name="rotateY" data-d="deg" min="-180" value="0" max="180" step=".00001">
  <label>rotateZ</label>
  <input type="range" name="rotateZ" data-d="deg" min="-180" value="0" max="180" step=".00001">
</form>

<form id="iphone">
  <label>perspective</label>
  <input type="range" name="perspective" data-d="px" min="0" value="1000" max="20000" step=".1">
  <label>perspective_correction</label>
  <input type="range" name="perspective_correction" min="0" value="50" max="100" step=".0001">
</form>
<div class="iphone">
  <div class="screenshot"></div>
</div>

<pre></pre>

SCSS

body {
	overflow: hidden;
}
.iphone {
    width: 100%;
    position: relative;
    height: 0;
    padding-bottom: 75.379%; // 100% / 2770px * 2088px 
    background: url() no-repeat;
    background-size: cover;
    z-index: 100;
    
    //perspective: 4366.5px;
perspective-origin: 50% 50%;
}

.screenshot {
    position: absolute;
background: url(http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-140mmf_35-56g_ed_vr/img/sample/sample1_l.jpg) 50% 0 no-repeat;
background-size: cover;
left: 50%;
top: 50%;
width: 47.8%;
height: 0;
padding-bottom: 84.97%;
transform-origin: 50% 50%;
transform: translate(-50%,-50%) scaleX(1) scaleY(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg);


	margin: 0;
    z-index: 200;
	opacity: .8;
}

form {
  position: fixed;
  top: 10px;
  left:10px;
  z-index: 9999;
  
  width: calc(50% - 15px);
  
  label {
    display: block;
  }
  input {
    display: block;
    width: 100%;
  }
  
  &#iphone {
    left: auto;
    right: 10px;
  }
}

pre {
  position: fixed;
  z-index: 999999;
  right: 20px;
  left:20px;
  bottom:20px;
  background: #222;
  color: #eee;
  padding: 10px;
  
}

JavaScript

var defaults = {
  scaleX: 0.87788,
  scaleY: 0.83718,
  rotateX: 49.09091,
  rotateY: 0.24423,
  rotateZ: -41.76391,
  perspective: 4119.0648,
  perspective_correction: 8.589
};
var perspective_correction = 3.8,
  perspective_correction_input = $('input[name="perspective_correction"]'),
  perspective_input = $('input[name="perspective"]'),
  phone = $('.iphone'),
  screen = $('.screenshot');

$.each(defaults, function(t, v) {

  $('input[name="' + t + '"]').val(v);

});

update();

$('input').on('change update input', update);

$(window).on('resize', resize)

function resize() {
  window.requestAnimationFrame(function() {
    phone.css({
      perspective: perspective_input.val() * perspective_correction_input.val() * phone.width() / 10000
    });
    update();
  });
}

function update() {
  var t = 'translate(-50%,-50%)',
    p;
  $('input').each(function() {
    var i = $(this),
      name = i.prev('label').text(),
      n = i.val(),
      d = i.data('d') || '';
    if (name != 'perspective' && name != 'perspective_correction') {
      t += ' ' + name + '(' + n + d + ')';
    } else if (name == 'perspective') {
      p = perspective_input.val() * perspective_correction_input.val() * phone.width() / 10000;
    }

  });
  window.requestAnimationFrame(function() {
    screen.css({
      transform: t
    });
    phone.css({
      perspective: p
    });
    $('pre').text('transform: ' + t + ';' + "\n" + 'perspective: ' + p + 'px' + "\n" + 'correction: ' + perspective_correction_input.val());
  });
}