iPhone + Screenshot

need a fix

by Vladimir Sobolev

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" min="0" value="1000" max="20000" step=".1">
</form>
<div class="iphone">
  <div class="screenshot"></div>
</div>

<pre></pre>

SCSS

.iphone {
    width: 100%;
    position: relative;
    height: 0;
    padding-bottom: 75.379%; // 100% / 2770px * 2088px 
    background: url(https://dl.dropbox.com/s/3pwoxhbv6vl88kx/iphone4.png?dl=1) no-repeat;
    background-size: cover;
    z-index: 100;
    
    perspective: 4366.5px;
perspective-origin: 50% 50%;
}

.screenshot {
    position: absolute;
background: url(https://dl.dropbox.com/s/jixmqjlpnjnyndr/tsogo-iphone%20%282%29.jpg?dl=1) 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;
  bottom:20px;
  background: #222;
  color: #eee;
  padding: 10px;
  
}

JavaScript

var defaults = {
  scaleX: 0.8757,
  scaleY: 0.82948,
  rotateX: 48.62151,
  rotateY: 0.43028,
  rotateZ: -42.0239,
  perspective: 4366.5
}

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

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

});

update();

$('input').on('change update input', 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') {
      t += ' ' + name + '(' + n + d + ')';
    } else {
      p = i.val();
    }
  });
  window.requestAnimationFrame(function() {
    $('.screenshot').css({
      transform: t
    });
    $('.iphone').css({
      perspective: p
    });
    $('pre').text('transform: ' + t + ';' + "\n" + 'perspective: ' + p + 'px');
  });
}