Scryppi

Родительскому блоку задать
perspective: 1200px;

У блока, который хотите трансформировать, по событию скролла меняете
'transform: rotateX('+angle+'deg)'
где angle - угол, на который нужно наклонить блок
Можно вычислить так: angle = window.scrollY/window.innerHeight*60

P.S. Чтобы узнать, как устроены подобные вещи, просто смотрите в Devtools

$(".elem__selected").css({[style]: value});

Конечно можно и через vue, все сделать но я согласен с Микола Деревло смылла тянуть целый фреймворк не вижу если же конечно сама страница уже не имеет задачи быть маленьким SPA приложение, если же там будет развиваться страница в будущем будет серьезный функционал то тогда есть смысл брать какой-то фреймворк , и развивать как душа желает, я бы рекомендовал angular или react, я не могу утверждать но мне кажется что под эти фреймы на данный момент времени, можно найти чуть побольше написаных готовых решений чем под vue,

Вот сворганил тебе за 5 мин, правда не на чистом JS а на jquery, но и на чистом не проблема смотри
здесь

Разметка

<div class="container">
  <div class="blocks">

    <div class="block">
      Блок #1
    </div>

    <div class="block">
      Блок #2
    </div>

    <div class="block">
      Блок #3
    </div>

    <div class="block">
      Блок #4
    </div>
  </div>
  
  <div class="settings"> 
   <div class="">
     <label for="">Цвет</label>
     <input class="color-val" type="text">
     <button id="changeColor">Сменить</button>
   </div>
   
   <div class="">
     <label for="">Ширина</label>
     <input class="width-val" type="text">
     <button id="changeWidth">Сменить</button>
   </div>
   
   <div class="">
     <label for="">Высота</label>
     <input class="height-val" type="text">
     <button id="changeHeight">Сменить</button>
   </div>     
  </div>
</div>

Обработка собитий

$(function() {
 //замена цвета блоков
 $("#changeColor").click(function(){
   var parmColor = $(".color-val").val();
  
    $(".block").css( { backgroundColor: parmColor });
  });
   //замена ширины блоков
 $("#changeWidth").click(function(){
   var parmWidth = $(".width-val").val();
   if (parmWidth > 40) {
   	$(".block").css( { width: parmWidth });
   }
  });
   //замена высоты блоков
 $("#changeHeight").click(function(){
   var parmHeight = $(".height-val").val();
  
    $(".block").css( { height: parmHeight });
  });
});