$(function(){
  $(window).on('scroll',function(){
    var currentScrollTop = $(this).scrollTop();
    var totalHeight = $('.main').height();
    var per = currentScrollTop / totalHeight;
    console.log(0.5 - per,currentScrollTop);
    transformPhone($('.phone'), 0.5 - per, currentScrollTop);
    
    return false;
  })
  
  function transformPhone($element,per,currentScrollTop){
    var rotateX = 30*per,
        rotateY = -30*per,
        rotateZ = 40*per;
    $element.css({
      'transform':'rotateX('+rotateX+'deg) rotateY('+rotateY+'deg) rotateZ('+rotateZ+'deg)',
      'top':currentScrollTop + 300*(1-per),
    })
  }
})